Flatpickr.js 只显示当天的第一个字母

Question

我在文档中找不到如何只显示当天的第一个字母。默认情况下它显示周一周二等... 我想像下面的例子一样展示它

window.addEventListener('load', (event) => {

  var datesToEnable = JSON.parse(document.getElementById('dates').innerHTML);
  console.log(datesToEnable);
  var fp = flatpickr(document.querySelector('#flatpickr'), {
    // init flatpicker as an inline NON modal date picker
    // min date today
    // disable all dates
    // enable dates coming from JSON object
    // able to change the datge format if necessary
    inline: 'true',
    altFormat: "F j, Y",
    altInput: true,
    minDate: "today",
    disableMobile: "true",
    enable: datesToEnable.dates,
    onChange: function(selectedDates, dateStr, instance) {
      console.log('date: ', dateStr);
    }
  });

});

Answer 1

您可以使用 locale 配置选项根据您的要求自定义标签。
请在此处查看官方文档：Localization
示例：

flatpickr(myElem, {
    locale: {
        firstDayOfWeek: 2
    }
});

工作样本：

window.addEventListener('load', (event) => {

  var datesToEnable = JSON.parse(document.getElementById('dates').innerHTML);
  console.log(datesToEnable);
  var fp = flatpickr(document.querySelector('#flatpickr'), {
    // init flatpicker as an inline NON modal date picker
    // min date today
    // disable all dates
    // enable dates coming from JSON object
    // able to change the datge format if necessary
    inline: 'true',
    altFormat: "F j, Y",
    altInput: true,
    minDate: "today",
    disableMobile: "true",
    enable: datesToEnable.dates,
    locale: {
      weekdays: {
        shorthand: ["S", "M", "T", "W", "T", "F", "S"]
      }
    },
    onChange: function(selectedDates, dateStr, instance) {
      console.log('date: ', dateStr);
    }
  });
});

input {
  display: none;
}
.flatpickr-monthDropdown-months {
  -webkit-appearance: none !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.min.js"></script>
<script type="application/json" id="dates">
  {
        "dates": ["2020-06-20", "2020-06-21", "2020-06-24"]
    }
</script>
<input type='text' id="flatpickr" />

Answer 2

如果您已经定义了 Flatpickr js 和 css，您可以简单地自定义它的属性。这里是文档 [https://unpkg.com/flatpickr@2.0.5/index_.html][Property]

let Flatpickr = document.getElementById("date").flatpickr({
 dateFormat: "Y-m-d H:i"
});

Flatpickr.l10n.weekdays.shorthand = ['S', 'M', 'T', 'W', 'T', 'F', 'S']
document.getElementById('date').flatpickr();

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


<input id="date" type='text' placeholder="Select Date..">

Flatpickr.js 只显示当天的第一个字母

Flatpickr.js show first letter of the day only

html

javascript

jquery

flatpickr