flatpickr

What is flatpickr?

Flatpickr is a lightweight and powerful datetime picker library. It allows users to easily select dates, times, or date ranges with a simple and customizable interface. It is highly configurable and supports a wide range of options and plugins to enhance its functionality.

What are flatpickr's main functionalities?

Basic Date Picker

This initializes a basic date picker on an input element with the ID 'datePicker'.

const flatpickr = require('flatpickr');
flatpickr('#datePicker', {});

Date Range Picker

This sets up a date range picker, allowing users to select a start and end date.

const flatpickr = require('flatpickr');
flatpickr('#dateRangePicker', { mode: 'range' });

Time Picker

This initializes a time picker without a calendar, allowing users to select a time.

const flatpickr = require('flatpickr');
flatpickr('#timePicker', { enableTime: true, noCalendar: true, dateFormat: 'H:i' });

Custom Date Format

This sets up a date picker with a custom date format (day-month-year).

const flatpickr = require('flatpickr');
flatpickr('#customFormatPicker', { dateFormat: 'd-m-Y' });

Disabling Specific Dates

This initializes a date picker that disables specific dates, preventing users from selecting them.

const flatpickr = require('flatpickr');
flatpickr('#disableDatesPicker', { disable: ['2023-10-10', '2023-10-20'] });

Other packages similar to flatpickr

react-datepicker

React DatePicker is a simple and reusable datepicker component for React. It offers similar functionalities to flatpickr but is specifically designed for React applications. It provides a more seamless integration with React's state management and lifecycle methods.

pikaday

Pikaday is a lightweight JavaScript datepicker with no dependencies. It offers a minimalist approach to date picking and is highly customizable. Compared to flatpickr, Pikaday is more focused on simplicity and ease of use, but it may lack some of the advanced features and plugins available in flatpickr.

air-datepicker

Air Datepicker is a lightweight, customizable, and dependency-free datepicker. It provides a wide range of options and configurations similar to flatpickr. However, it may not have as extensive plugin support as flatpickr.

README

Preamble

Almost every large SPA or project involves date and time input. There are limited options, however, if you also prefer to keep your projects lean and consequently stay away from heavy frameworks such as jQuery, or even Bootstrap.

Unfortunately, current HTML5 implementations (input[type='datetime']) are neither aesthetically pleasing nor widely supported. So that's out of the way.

Appalled at the fact that I have to load 300kb of jquery and jquery UI or hook up bootstrap just to use a calendar, I created this [date][time]picker that's powerful, easy to use, and looks good out of the box.

Written in vanilla javascript, works with anything, anywhere.

Install & Use

Along with demos and documentation: http://chmln.github.io/flatpickr

See also:

• ember-flatpickr addon
• Vue.js directive