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

2024-09-08 • 问答

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

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);
    }
  });

});

您可以根据需要使用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","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" />

如果您已定义Flatficker 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','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仅显示当天的第一个字母

iCMS 回答：Flatpickr.js仅显示当天的第一个字母

大家都在问