LUNO

  1. Home
  2. Documentation
  3. Flatpickr
Dropify Inputmask
Introduction

Flatpickr

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>
Basic
DateTime
{
    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",
}
Dropify Inputmask