🎉 New version released! 🎉
Lightweight, dependency-free, fast, customizable datepicker written in pure JavaScript. Works in all modern browsers which supports native css variables.
npm i air-datepicker
import AirDatepicker from 'air-datepicker'
import 'air-datepicker/air-datepicker.css'
new AirDatepicker('#el' [, options]);
- added lazy rendering - now inner components of datepicker will be created only when it will be visible, and will be destroyed when datepicker is hidden
- improved
position
- now it can be function which allows you to perform advanced positioning using third-party libraries such as popperjs or manually - added
isMobile
option, which allows showing Air Datepicker as modal window on mobile devices - added
visiblie
option, if it is set totrue
then calendar will be visible at the start - changed
dateFormat
- as function it now handles all dates at once, instead of each date separately - fixed field names in
onSelect
andonRenderCell
options:type
->cellType
,dp
->datepicker
- fixed typings
- fixed
closet
function, thanks to @hreyeslo in #445 - added Turkish locale, thanks to @ozkanozcan in #447
- added opportunity to set attributes when creating custom buttons, thanks to @khidirbekov in #448
- added Thai locale, thanks to @boatkung in #453
It is been a while since the last release, a lot of work has been done, and I'm glad to finally present a new version of Air Datepicker.
The main goal was to remove jQuery dependency, and I'm happy to announce that Air Datepicker is no longer need any dependency, hurray! 🥳
Now it's written in ES6, uses native css variables for easy customization, and it's all built with webpack.
Soooo, here is the full list of changes:
- no more jQuery
- improve rendering process - remove redundant cell render when selecting date, which gave a large speed boost compared to the old version
- date format tokens now use Unicode Technical Standard
- TypeScript support
- added
selectedDates
option, to be able to select dates from the start - added a possibility to create custom buttons
- now one could change selected range by dragging dates
- added
container
option which allows you to place datepicker in a custom element navTitles
can receive a function and could render dynamicallydateFormat
now can receive a functiononSelect
andonRenderCell
callbacks are now receive a single object as an argument instead of multiple parametersselectDate
now receives second parameter with optionsonChangeMonth
,onChangeYear
,onChangeDecades
are replaced with single optiononChangeViewDate
- localization now must be provided as an object instead of string as it was before
- To run project run
npm i
, thennpm run dev:serve
. - If you want to report a bug, please provide steps and code to reproduce it or create a live example. You could use this template for creating sandbox
- If you have a question please ask it on StackOverflow with tag
air-datepicker
- If you have a proposal or PR please submit it to the main branch - please follow code style according to .eslint configuration. Also make sure that your effort is aligned with project roadmap - my goal is to keep datepicker clean and lightweight (under 15kb) without overcomplications or narrowly focused features
Thank you! 😊
Air Datepicker is MIT licensed.