Skip to main content
codeFork me on GitHub favoriteMade by Daemon & djibe

Date pickers flatpickr

Date pickers let users select a date, or a range of dates.

Date pickers let users select a date or range of dates. They should be suitable for the context in which they appear.

Date pickers can be embedded into:

  • Dialogs on mobile
  • Text field dropdowns on desktop

Flatpickr is a versatile datetime picker.

Material Design guidelines: Date pickers Material Components for the web: Date pickers (planned) flatpickr: Official documentation

Stylesheet material-plugins.css is required as this material design theme for flatpickr is fully designed by djibe.
Plugin is jQuery free but can be initialized as a jQuery plugin.

Demo

flatpickr will probably become default Picker as it corresponds perfectly to latest Material design guidelines: Dropdown calendar on desktop and system’s default picker on mobile.

Don’t use inline picker for Date and Time inputs.

Using flatpickr

Import material-plugins.css after Material CSS. Don’t use extra flatpickr CSS.

<link href="https://cdn.jsdelivr.net/gh/djibe/material@4.6.2-1.0/css/material-plugins.min.css" rel="stylesheet" crossorigin>

Import flatpickr after Material JavaScripts.

<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.6/dist/flatpickr.min.js" integrity="sha256-BSZ2gjTJLE5ZEGH1e6beyHYNOITz6M26XFre9lEBdx8=" crossorigin></script>

Set HTML code of your picker menu.

<div class="form-group">
  <label for="flatpickr-demo">Date</label>
  <input class="form-control flatpickr" type="text" placeholder="Select Date.." id="flatpickr-demo">
</div>

Initialize plugin with JavaScript or jQuery parameters.

flatpickr("#flatpickr-demo", {})

All parameters are detailed in official documentation.

That’s it.

Inline picker is not rendered using mobile’s default operating system Picker and is barely usable on mobile.
Try to avoid using inline parameter for a good mobile User experience.

Picker types

Date

Single date selection is default picker. See Demo example above.

Picker is also compatible with multiple dates selection.

<div class="form-group form-ripple">
  <label for="flatpickr-demo">Date</label>
  <input class="form-control flatpickr" type="text" placeholder="Select Date.." id="flatpickr-date">
</div>
<script>
  flatpickr('#flatpickr-date', {})
<script>

Date range

Select a start and final date.

Example displays the picker inline and sets minDate to Today.

<div class="form-group">
  <label for="flatpickr-range">Arrival and departure dates</label>
  <input class="form-control flatpickr" type="text" placeholder="Select Dates.." id="flatpickr-range">
</div>
<script>
  flatpickr('#flatpickr-range', {
    inline: true,
    mode: 'range',
    minDate: 'today',
    dateFormat: 'd-m-Y'
  })
</script>

DateTime

Select date and time.

Example also displays week numbers and sets time format in British 12h format.

<div class="form-group">
  <label for="flatpickr-datetime">Date and time of event</label>
  <input class="form-control flatpickr" type="text" placeholder="Select Datetime.." id="flatpickr-datetime">
</div>
<script>
  flatpickr('#flatpickr-datetime', {
    enableTime: true,
    dateFormat: 'd/m/Y H:i',
    time_24hr: false,
    weekNumbers: true
  })
</script>

Time

Select time only.

Simplest time picker in a 24h format and a default time.

<div class="form-group">
  <label for="flatpickr-time">Time of event</label>
  <input class="form-control flatpickr" type="text" id="flatpickr-time">
</div>
<script>
  flatpickr('#flatpickr-time', {
    // inline: true,
    enableTime: true,
    noCalendar: true,
    dateFormat: 'H:i',
    time_24hr: true,
    defaultDate: '13:45'
  });
</script>

More details

For date format, display, seconds, localization and more, read official documentation