flatpickr is a lightweight and powerful datetime picker. For more info, please visit the plugin's site

  • Dependency-free (no bloated bundles)
  • Simple, polished UX
  • Date + time input
  • Range selections
  • Ability to select multiple dates
  • Can be used as just a time picker
  • Display dates in a human-friendly format
  • Easily disable specific dates, date ranges, or any date using arbitrary logic
  • Week numbers
  • 51 locales
  • 8 colorful themes (incl. dark and material)
  • Numerous plugins
  • Libraries available for React, Angular, Vue, Ember, and more
<!-- plugin css file  -->
<link rel="stylesheet" href="assets/bundles/flatpickr.min.css">

<!-- Plugin Js -->
<script src="assets/bundles/flatpickr.bundle.js"></script>
    enableTime: true,
    dateFormat: "Y-m-d H:i",
minDate and maxDate

minDate option specifies the minimum/earliest date (inclusively) allowed for selection.

maxDate option specifies the maximum/latest date (inclusively) allowed for selection.

    minDate: "2020-01"
Selecting multiple dates

It is possible to select multiple dates.

    mode: "multiple",
    dateFormat: "Y-m-d"
Preloading range dates
    mode: "range",
    dateFormat: "Y-m-d",
    defaultDate: ["2016-10-10", "2016-10-20"]
Time Picker
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",