I cannot find in the documentation how to make the first letter of the day show up only. By default it’s showing Mon Tue etc … I would like to be showing it like below example
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); } }); });
Advertisement
Answer
You can use the locale
config option to customize the label as per your requirement.
See the official documentation here: Localization
Example:
flatpickr(myElem, { locale: { firstDayOfWeek: 2 } });
Working sample:
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" />