Press "Enter" to skip to content

Flat Style Datetime Picker in Pure Javascript | flatpickr

Flatpickr – javascript datetime picker is a simple yet powerful and customizable js library that enables the visitor to choose a date/time/date range from a flat, and clean calendar.

Almost every resort or large project includes a date and time input. Native browser implementations of these are inconsistent and limited in functionality. Most of the other libraries require you to pull out heavy dependencies like jQuery, Bootstrap, and moment.js. I wanted something nice that looked out of the box, dependency-free, sturdy, and extensible.

Feature overview:

  • Dependency free (without inflated packages)
  • A simple and refined user experience
  • Date + time entry
  • Scope selections
  • Ability to set multiple dates
  • It can be used just as a time picker
  • Display dates in a human-friendly format
  • You can easily disable specific dates, date ranges, or any date by using arbitrary logic
  • Numbers for the week
  • 51 languages
  • 8 color themes (including dark and material)
  • Many additions
  • Libraries available for React, Angular, Vue, Ember, and more

How to make use of it:

Include the stylesheet flatpickr.min.css and JavaScript flatpickr.min.js in your doc.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

Attach a flat date picker to an input field.

<input id="flatpickr">
var example = flatpickr('#flatpickr');

Available choices with default values.

// flatpickr('selector', options);
flatpickr('#flatpickr',{

  // A string of characters which are used to define how the date will be displayed in the input box. 
  dateFormat: 'Y-m-d',

  // A reference to another input element. 
  // This can be useful if you want to show the user a readable date, but return something totally different to the server.
  altFormat: "F j, Y",

  // Exactly the same as date format, but for the altInput field
  altInput: false,

  // This class will be added to the input element created by the altInput option.  
  // Note that altInput already inherits classes from the original input.
  altInputClass: "",

  // Allows the user to enter a date directly input the input field. By default, direct entry is disabled.
  allowInput: false,

  // Instead of body, appends the calendar to the specified node instead.
  appendTo: null,
  
  // Defines how the date will be formatted in the aria-label for calendar days, using the same tokens as dateFormat. 
  // If you change this, you should choose a value that will make sense if a screen reader reads it out loud.
  ariaDateFormat: "F j, Y", 

  // Whether clicking on the input should open the picker. You could disable this if you wish to open the calendar manually with.open()
  clickOpens: true,

  // Sets the initial selected date(s).
  // If you're using mode: "multiple" or a range calendar supply an Array of Date objects or an Array of date strings which follow your dateFormat.
  // Otherwise, you can supply a single Date object or a date string.
  defaultDate: null,  
  
  // Initial value of the hour element.
  defaultHour: 12,  

  // Initial value of the minute element.  
  defaultMinute: 0, 

  // The minimum date that a user can start picking from, as a JavaScript Date.
  minDate: null,

  // The maximum date that a user can pick to, as a JavaScript Date. 
  maxDate: null,

  // Dates to disable, using intervals
  // disable: [ { 'from': '2015-09-02', 'to': '2015-10-02' } ]
  disable: null,

  // Set disableMobile to true to always use the non-native picker.
  // By default, flatpickr utilizes native datetime widgets unless certain options (e.g. disable) are used.
  disableMobile: false,
  
  // See Enabling dates
  enabl: [],

  // Enables time picker
  enableTime: false, 

  // Enables seconds in the time picker.
  enableSeconds: false, 

  // Allows using a custom date formatting function instead of the built-in handling for date formats using dateFormat, altFormat, etc.
  formatDate: null,  

  // Adjusts the step for the hour input (incl. scrolling)
  hourIncrement: 1, 

  // Displays the calendar inline
  inline: false,

  // Show the month using the shorthand version.
  shorthandCurrentMonth: false,

  // Adjusts the step for the minute input (incl. scrolling)
  minuteIncrement: 5,

  // "single"  "single", "multiple", or "range"
  mode: "single",

  // next/prev arrows
  prevArrow: '&lt;',
  nextArrow: '&gt;',

  // Function that expects a date string and must return a Date object
  parseDate: false,

  // Show the month using the shorthand version (ie, Sep instead of September).
  shorthandCurrentMonth: false,

  // Position the calendar inside the wrapper and next to the input element. (Leave false unless you know what you're doing.
  static: false,

  // Displays time picker in 24 hour mode without AM/PM selection when enabled. 
  time_24hr: false,

  // Enables display of week numbers in calendar.
  weekNumbers: false,

  // Hides the day selection in calendar.
  // Use it along with enableTime to create a time picker.
  noCalendar: false  
  
});

Callback features accessible.

flatpickr('#flatpickr',{

  // Function(s) to trigger on every date selection. 
  onChange: null  

  // Function(s) to trigger on every time the calendar is closed.
  onClose: null  

  // Function(s) to trigger on every time the calendar is opened.
  onOpen: null  

  // Function to trigger when the calendar is ready.
  onReady: null  
  
});

Flat Style JavaScript Date Picker, flatpickr datetime picker Plugin/Github, how to use flatpickr, vanilla js datepicker, react-flatpickr, flatpickr custom css, flatpickr date format, flatpickr set date


See Demo And Download

Official Website(flatpickr): Click Here

This superior jQuery/javascript plugin is developed by flatpickr. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.