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 iso-date data attribute to the cells, #640
- added triggering
change
event on<input />
element when user selects a date in the calendar #624 - fixed an unnecessary call to the
onBeforeSelect
function when the{silent: false}
argument is passed #649 - now
clear
button works correctly in the range mode #642 - now keyboard events are not triggered when the calendar is hidden #631
- fixed return type in
selectDate
function, thanks to marfrede in #656 - now you can re-enable cells in
onRenderCell
callback, thanks to kdagnan in #657 - fixed gramma and spelling in the Russian docs, thanks to Ser5 #669
- fixed range mode #613
- fixed range mode #613
- improved
destroy()
behavior - addedisDestroyed
property,opts
andselectedDates
will still have empty values, instead ofnull
, even after AirDatepicker has been destroyed #600
- added
fixedHeight
option, allows you to have equal weeks number in every month - added method
disableDate
, allows you to disabled one or multiple dates with datepicker API - added prop
disabledDates
- it is a Set which holds all disabled dates - added possibility to pass
{silent: true}
toupdate
andsetCurrentView
methods, #583 - changed
update
method - now if you passselectedDates
then calendar will keep selected only those dates - fixed selecting time on same date when
range: true
, #568 - fixed date conversion to local date when using strings, e.g
selectDate('2024-03-05')
#589 - fixed localization generation, thanks to hreyeslo in #524
- fixed type definition for
clear
method, thanks to ahmetzambak in #591 - fixed German translation for "clear", thanks to pbek in #582
- added Slovenian locale, thanks to carliblaz in #569
- added Basque locale, thanks to ikerib in #529
- added Norwegian locale, thanks to MortenSpjotvoll in #521
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 dynamically -
dateFormat
now can receive a function -
onSelect
andonRenderCell
callbacks are now receive a single object as an argument instead of multiple parameters -
selectDate
now receives second parameter with options -
onChangeMonth
,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.