air-datepicker

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

• Version 3

Recent updates

v3.6.0

• 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

v3.5.3

• fixed range mode #613

v3.5.2

• fixed range mode #613

v3.5.1

• improved destroy() behavior - added isDestroyed property, opts and selectedDates will still have empty values, instead of null, even after AirDatepicker has been destroyed #600

v3.5.0

• 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} to update and setCurrentView methods, #583
• changed update method - now if you pass selectedDates 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

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 dynamically
• dateFormat now can receive a function
• onSelect and onRenderCell 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 option onChangeViewDate
• localization now must be provided as an object instead of string as it was before

Contribution

• To run project run npm i, then npm 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.