@@include('global/_head.html',{ "headTitle": "Flatpickr", "flatpickr": "true", "prism": "true", }) @@include('docs/_sidebar.html', {"page": "formelements"})
@@include('global/_page-header.html', {"PageHeader": "sticky-top"} )

Flatpickr

How it works

flatpickr is a lightweight and powerful datetime picker. For more info, please visit the flatpickr.js.org

  • Dependency-free (no bloated bundles)
  • Simple, polished UX
  • 51 locales
  • Libraries available for React, Angular, Vue, Ember, and more
  • Range selections
  • Date + time input
  • Can be used as just a time picker
  • Display dates in a human-friendly format
  • Week numbers
  • Ability to select multiple dates
  • Easily disable specific dates, date ranges, or any date using arbitrary logic
  • 8 colorful themes (incl. dark and material)
  • Numerous plugins
Basic Example
@@include('docs/_quick-url.html')
@@include('global/_page-footer.html', {"PageFooter": ""} )
@@include('global/_full-screen-menu.html', {"divClass": ""} ) @@include('global/_need-help.html', {"divClass": "offcanvas-start"} ) @@include('global/_quick-access.html', {"divClass": "offcanvas-end"} ) @@include('global/_theme-setting.html', {"divClass": "offcanvas-end"} ) @@include('global/_site-map.html', {"divClass": "offcanvas-start sm"} ) @@include('global/_body-hero-img-2.html', {"bodyBgClass": "body-bg"} ) @@include('global/_plugin-script.html', { "flatpickr": "true", "prism": "true", })