daterangepicker
JavaScript Date Range, Date and Time Picker Component
A front-end JavaScript component that adds a click-to-open calendar popup to any web page, letting users select a start and end date or a single date.
This is a JavaScript component that adds a date range picker to a web page. When a user clicks a field, a dropdown calendar appears where they can select a start date and an end date. The author originally built it for a web analytics product called Improvely, which needed a way for users to choose date ranges when viewing reports. It is a front-end UI component, not a backend service.
The component includes a handful of practical options. You can restrict which dates a user is allowed to select, which is useful if you only want them picking dates within a certain window. There is a single-date mode for situations where you only need one date rather than a range. A time picker option extends the calendar to include hours and minutes. You can also define preset ranges, such as the last 7 days or the current month, so users can select common spans with one click rather than picking dates manually.
Text labels and date display formats can be localized, meaning you can adjust them to suit different languages or regional date conventions. This makes the component usable in international applications without needing to swap it out for a region-specific alternative.
The README is short and does not include setup or installation instructions directly. It points to an external documentation site for full details and live usage examples. The license is MIT, which means it is free to use in personal and commercial projects without restriction.
Where it fits
- Add a date range selector to a web analytics dashboard so users can filter reports by custom date windows.
- Build a booking or scheduling form where users pick a start and end date from a calendar popup.
- Add preset options like 'Last 7 days' or 'This month' so users can select common ranges with one click.
- Create an international date picker with localized labels and regional date formats for multi-language apps.