π New version released!π
Air Datepicker
Lightweight, dependency-free, fast, customizable datepicker written in pure JavaScript. Works in all modern browsers which supports native css variables.
Install
npm i air-datepicker
Usage
import AirDatepicker from 'air-datepicker'
import 'air-datepicker/air-datepicker.css'
new AirDatepicker('#el' [, options]);
Demo and docs
Recent updates
3.1.0
- 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
Version 3.0.0 highlights
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
Contribution
- 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!
License
Air Datepicker is MIT licensed.