Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chmln/flatpickr

lightweight, powerful javascript datetimepicker with no dependencies
https://github.com/chmln/flatpickr

date datepicker daterange daterangepicker datetime datetime-picker timepicker

Last synced: 3 months ago
JSON representation

lightweight, powerful javascript datetimepicker with no dependencies

Host: GitHub
URL: https://github.com/chmln/flatpickr
Owner: flatpickr
License: mit
Created: 2015-08-10T23:52:45.000Z (about 9 years ago)
Default Branch: master
Last Pushed: 2024-04-05T16:43:33.000Z (7 months ago)
Last Synced: 2024-04-13T19:22:45.340Z (7 months ago)
Topics: date, datepicker, daterange, daterangepicker, datetime, datetime-picker, timepicker
Language: TypeScript
Homepage: https://flatpickr.js.org
Size: 7.48 MB
Stars: 15,955
Watchers: 205
Forks: 1,436
Open Issues: 785
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md

Awesome Lists containing this project

README

        ## flatpickr - javascript datetime picker

[![Actions Status](https://github.com/flatpickr/flatpickr/workflows/GitHub%20Actions/badge.svg)](https://github.com/flatpickr/flatpickr/actions)

[![Coverage](https://coveralls.io/repos/github/chmln/flatpickr/badge.svg?branch=master)](https://coveralls.io/github/chmln/flatpickr)

[![npm version](https://badge.fury.io/js/flatpickr.svg)](https://www.npmjs.com/package/flatpickr)

[![CDNJS](https://img.shields.io/cdnjs/v/flatpickr.svg)](https://cdnjs.com/libraries/flatpickr)

[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=plastic)](https://raw.githubusercontent.com/flatpickr/flatpickr/master/LICENSE.md)

![blue](https://cloud.githubusercontent.com/assets/11352152/14549371/3cbb65da-028d-11e6-976d-a6f63f32061f.PNG)

![green](https://cloud.githubusercontent.com/assets/11352152/14549373/3cbe975a-028d-11e6-9192-43975f0146da.PNG)

![confetti](https://cloud.githubusercontent.com/assets/11352152/14549440/de9bf55e-028d-11e6-9271-46782a99efea.PNG)

![red](https://cloud.githubusercontent.com/assets/11352152/14549374/3cc01102-028d-11e6-9ff4-0cf208a310c4.PNG)

![default](https://cloud.githubusercontent.com/assets/11352152/14549370/3cadb750-028d-11e6-818d-c6a1bc6349fc.PNG)

![dark](https://cloud.githubusercontent.com/assets/11352152/14549372/3cbc8514-028d-11e6-8daf-ec1ba01c9d7e.PNG)

## Motivation

Almost 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.

Feature overview:

- 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

![](https://user-images.githubusercontent.com/11352152/36033089-f37dc1d0-0d7d-11e8-8ec4-c7a56d1ff92e.png)

flatpickr provides more functionality at a fraction of the size of other libraries.

## Compatibility

IE9 and up, Edge, iOS Safari 6+, Chrome 8+, Firefox 6+

## Install & Use

Demos and documentation: https://flatpickr.js.org

See also:

* [angular2+-flatpickr addon](https://github.com/mezoistvan/ng2-flatpickr)

* [angularJS-flatpickr addon](https://www.npmjs.com/package/angular-flatpickr)

* [ember-flatpickr addon](https://www.npmjs.com/package/ember-flatpickr)

* [Preact Component](https://github.com/molnarmark/preact-flatpickr)

* [React Component](https://github.com/coderhaoxin/react-flatpickr)

* [Stimulus.js Controller](https://github.com/adrienpoly/stimulus-flatpickr)

* [Svelte Component](https://github.com/jacobmischka/svelte-flatpickr)

* [vue-flatpickr component](https://github.com/ankurk91/vue-flatpickr-component)

* [lit-flatpickr component](https://github.com/Matsuuu/lit-flatpickr)

## Supporting flatpickr

flatpickr will never change its license, pester users for donations, or engage in other user-hostile behavior.

Nevertheless, if you enjoyed working with this library or if its made your life easier, you can buy me a cup of coffee :)