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/
JavaScript
x
23
23
1
window.addEventListener('load', (event) => {
2
3
var datesToEnable = JSON.parse(document.getElementById('dates').innerHTML);
4
console.log(datesToEnable);
5
var fp = flatpickr(document.querySelector('#flatpickr'), {
6
// init flatpicker as an inline NON modal date picker
7
// min date today
8
// disable all dates
9
// enable dates coming from JSON object
10
// able to change the datge format if necessary
11
inline: 'true',
12
altFormat: "F j, Y",
13
altInput: true,
14
minDate: "today",
15
disableMobile: "true",
16
enable: datesToEnable.dates,
17
onChange: function(selectedDates, dateStr, instance) {
18
console.log('date: ', dateStr);
19
}
20
});
21
22
});
23
Advertisement
Answer
You can use the locale
config option to customize the label as per your requirement.
See the official documentation here: Localization
Example:
JavaScript
1
6
1
flatpickr(myElem, {
2
locale: {
3
firstDayOfWeek: 2
4
}
5
});
6
Working sample:
JavaScript
1
26
26
1
window.addEventListener('load', (event) => {
2
3
var datesToEnable = JSON.parse(document.getElementById('dates').innerHTML);
4
console.log(datesToEnable);
5
var fp = flatpickr(document.querySelector('#flatpickr'), {
6
// init flatpicker as an inline NON modal date picker
7
// min date today
8
// disable all dates
9
// enable dates coming from JSON object
10
// able to change the datge format if necessary
11
inline: 'true',
12
altFormat: "F j, Y",
13
altInput: true,
14
minDate: "today",
15
disableMobile: "true",
16
enable: datesToEnable.dates,
17
locale: {
18
weekdays: {
19
shorthand: ["S", "M", "T", "W", "T", "F", "S"]
20
}
21
},
22
onChange: function(selectedDates, dateStr, instance) {
23
console.log('date: ', dateStr);
24
}
25
});
26
});
JavaScript
1
6
1
input {
2
display: none;
3
}
4
.flatpickr-monthDropdown-months {
5
-webkit-appearance: none !important;
6
}
JavaScript
1
8
1
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.min.css" rel="stylesheet"/>
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.min.js"></script>
3
<script type="application/json" id="dates">
4
{
5
"dates": ["2020-06-20", "2020-06-21", "2020-06-24"]
6
}
7
</script>
8
<input type='text' id="flatpickr" />