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

【问题标题】：Flatpickr.js show first letter of the day onlyFlatpickr.js 仅显示当天的第一个字母
【发布时间】：2020-10-04 13:20:26
【问题描述】：

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

https://jsfiddle.net/wdL13cty/8/

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

});

【问题讨论】：

你能分享你的代码吗？最好是一个简短的工作示例。

标签： javascript html jquery flatpickr

【解决方案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" />

【讨论】：

谢谢！我还必须添加 longhand 天数（即使它们没有改变），否则会引发错误。 longhand: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] }

【解决方案2】：

如果你已经定义了 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', '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..">

【讨论】：