UNPKG

3.66 kBMarkdownView Raw
1## flatpickr - javascript datetime picker
2[![Actions Status](https://github.com/flatpickr/flatpickr/workflows/GitHub%20Actions/badge.svg)](https://github.com/flatpickr/flatpickr/actions)
3
4[![Coverage](https://coveralls.io/repos/github/chmln/flatpickr/badge.svg?branch=master)](https://coveralls.io/github/chmln/flatpickr)
5[![npm version](https://badge.fury.io/js/flatpickr.svg)](https://www.npmjs.com/package/flatpickr)
6[![CDNJS](https://img.shields.io/cdnjs/v/flatpickr.svg)](https://cdnjs.com/libraries/flatpickr)
7[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=plastic)](https://raw.githubusercontent.com/flatpickr/flatpickr/master/LICENSE.md)
8
9
10![blue](https://cloud.githubusercontent.com/assets/11352152/14549371/3cbb65da-028d-11e6-976d-a6f63f32061f.PNG)
11![green](https://cloud.githubusercontent.com/assets/11352152/14549373/3cbe975a-028d-11e6-9192-43975f0146da.PNG)
12![confetti](https://cloud.githubusercontent.com/assets/11352152/14549440/de9bf55e-028d-11e6-9271-46782a99efea.PNG)
13![red](https://cloud.githubusercontent.com/assets/11352152/14549374/3cc01102-028d-11e6-9ff4-0cf208a310c4.PNG)
14![default](https://cloud.githubusercontent.com/assets/11352152/14549370/3cadb750-028d-11e6-818d-c6a1bc6349fc.PNG)
15![dark](https://cloud.githubusercontent.com/assets/11352152/14549372/3cbc8514-028d-11e6-8daf-ec1ba01c9d7e.PNG)
16
17
18## Motivation
19Almost every large SPA or project involves date and time input. Browser's native implementations of those are inconsistent and limited in functionality. Most other libraries require you to pull in heavy dependencies like jQuery, Bootstrap, and moment.js. I wanted something that was good-looking out of the box, dependency-free, powerful, and extensible.
20
21Feature overview:
22
23- Dependency-free (no bloated bundles)
24- Simple, polished UX
25- Date + time input
26- Range selections
27- Ability to select multiple dates
28- Can be used as just a time picker
29- Display dates in a human-friendly format
30- Easily disable specific dates, date ranges, or any date using arbitrary logic
31- Week numbers
32- 51 locales
33- 8 colorful themes (incl. dark and material)
34- Numerous plugins
35- Libraries available for React, Angular, Vue, Ember, and more
36
37![](https://user-images.githubusercontent.com/11352152/36033089-f37dc1d0-0d7d-11e8-8ec4-c7a56d1ff92e.png)
38
39flatpickr provides more functionality at a fraction of the size of other libraries.
40
41## Compatibility
42IE9 and up, Edge, iOS Safari 6+, Chrome 8+, Firefox 6+
43
44## Install & Use
45
46Demos and documentation: https://flatpickr.js.org
47
48See also:
49* [angular2+-flatpickr addon](https://github.com/mezoistvan/ng2-flatpickr)
50* [angularJS-flatpickr addon](https://www.npmjs.com/package/angular-flatpickr)
51* [ember-flatpickr addon](https://www.npmjs.com/package/ember-flatpickr)
52* [Preact Component](https://github.com/molnarmark/preact-flatpickr)
53* [React Component](https://github.com/coderhaoxin/react-flatpickr)
54* [Stimulus.js Controller](https://github.com/adrienpoly/stimulus-flatpickr)
55* [Svelte Component](https://github.com/jacobmischka/svelte-flatpickr)
56* [vue-flatpickr component](https://github.com/ankurk91/vue-flatpickr-component)
57* [lit-flatpickr component](https://github.com/Matsuuu/lit-flatpickr)
58
59## Supporting flatpickr
60
61flatpickr will never change its license, pester users for donations, or engage in other user-hostile behavior.
62
63Nevertheless, if you enjoyed working with this library or if its made your life easier, you can buy me a cup of coffee :)
64
65<a href='https://ko-fi.com/A3381DJ9' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://az743702.vo.msecnd.net/cdn/kofi4.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>