Search code examples
javascripthtmljqueryflatpickr

Flatpickr.js show first letter of the day only

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

});

enter image description here

Solution

  • 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" />