Dashboards and reservation systems require a component that allows the user to filter data or find something according to a date filter, providing a start and end date. If you already work with standards date pickers, the easiest solution to implement such a component would be to simply create 2 inputs and initialize every picker on them, the first one should be the start date and the second one the end date. It will work and seems decent, however, if you would like to offer a better user experience, a date range picker would be excellent. This kind of component allows the user to simply select the start and end date usually by drag and drop within a single element, instead of clicking on different inputs (which makes it very intuitive).
In this compilation, we will share with you 5 of the best open-source Date Range Picker components that you can use in your projects with JavaScript.
5. Lightpick
Lightpick is the old and unmaintained version of Litepicker, it features no dependencies and:
- Single date or date range
- Show multiple months
- Min/Max days for select and/or Min/Max dates for select
- Select forward/backward
- Inline mode
- Repick date range
- Lock/Booked days
4. jQuery Date Range Picker
jQuery Date Range Picker is a jQuery plugin that allows users to select a date range. It requires jQuery +1.7, Moment +2.8.1 (MIT LICENSE). Supports IE8+, Firefox, Chrome, Safari, and other standard HTML5 browsers. Supports multi-language, you can choose a defined language or set it to auto-detect mode. You can also define new languages for it.
The HTML DOMs generated is fully CSS styled, you can change the skin by editing the CSS file easily. It accepts further customization job if you require more functions.
3. Hotel Datepicker
Hotel Datepicker is a pure Javascript date range picker for hotels. Requires Fecha 4.0.0 or above and supports all modern browsers.
2. Litepicker
Litepicker is a lightweight date range picker with no dependencies that features:
- Features
- No dependencies
- Single date or date range
- Show multiple months
- Min/Max days for select and/or Min/Max dates for select
- Select forward/backward
- Inline mode
- Repick date range
- Lock/Booked days
1. Date Range Picker
This date range picker component creates a dropdown menu from which a user can select a range of dates. I created it while building the UI for Improvely, which needed a way to select date ranges for reports. Features include limiting the selectable date range, localizable strings and date formats, a single date picker mode, a time picker, and predefined date ranges.
Honorable mentions
React Infinite Calendar
React Infinite Calendar is a very complete and useful Date Range picker component that features:
- Infinite scroll – Just keep scrollin', just keep scrollin'
- Flexible – Min/max date, disabled dates, disabled days, etc.
- Extensible – Add date range-selection, multiple date selection, or create your own HOC!
- Localization and translation – En français, s'il vous plaît!
- Customizable – Customize and theme to your heart's content.
- Year selection – For rapidly jumping from year to year
- Keyboard support –
⬆️ ⬇️ ⬆️ ⬇️ ⬅️ ➡️ ⬅️ ➡️ ↩️ - Events and callbacks – beforeSelect, onSelect, onScroll, etc.
- Mobile-friendly – Silky smooth scrolling on mobile
Vue.js Range Date Picker
VueJS Range date picker offers you a component very easy to use to select a date range.
If you know another awesome open source date range picker component, please share it with the community in the comment box.
