A lightweight, flexible, and powerful date picker with four selection modes — single, multiple, range, and multi-range. No dependencies required.
Powerful features packed into a tiny, dependency-free package.
Single date, multiple dates, date range, and multi-range selection — all out of the box.
Pure vanilla JavaScript. No jQuery, no Moment.js, no bloat. Just drop it in and go.
Extensive configuration options for display, restrictions, callbacks, and formatting.
Disable specific dates, date ranges, past/future dates, and set min/max boundaries.
Built-in internationalization with locale support for month/day names worldwide.
ARIA-compliant markup for screen readers and assistive technology support.
Works seamlessly on all screen sizes and device types, including mobile and tablet.
Show two months side-by-side for effortless range selection across month boundaries.
Try each selection mode live. Click a tab to switch.
new FlexiDatepicker('#demo-single', { mode: 'single', dateFormat: 'MMM d, yyyy', onSelectionChange: function(data) { // data.dates — array of selected dates console.log(data.dates); } });
new FlexiDatepicker('#demo-multiple', { mode: 'multiple', showSelectWeekdays: true, showSelectWeekends: true, showSelectAllDays: true, onSelectionChange: function(data) { console.log('Dates:', data.dates); } });
new FlexiDatepicker('#demo-range', { mode: 'range', dualCalendar: true, dateFormat: 'MM/dd/yyyy', onSelectionChange: function(data) { if (data.ranges.length) { const r = data.ranges[0]; console.log(`From: ${r.start} — To: ${r.end}`); } } });
new FlexiDatepicker('#demo-multirange', { mode: 'multi-range', showSelectWeekdays: true, showSelectWeekends: true, dualCalendar: true, onSelectionChange: function(data) { console.log('Ranges:', data.ranges); console.log('All dates:', data.dates); } });
Add FlexiDatepicker to your project in seconds.
npm install flexidatepicker
yarn add flexidatepicker
<link rel="stylesheet" href= "https://cdn.jsdelivr.net/gh/ leoanangmh/flexidatepicker@latest/ dist/flexidatepicker.min.css"> <script src= "https://cdn.jsdelivr.net/gh/ leoanangmh/flexidatepicker@latest/ dist/flexidatepicker.umd.min.js"> </script>
import FlexiDatepicker from 'flexidatepicker';
All available options with their defaults and descriptions.
| Option | Type | Default | Description |
|---|---|---|---|
| mode | String | 'multi-range' | Selection mode: single, multiple, range, multi-range |
| locale | String | 'en-US' | Locale for date formatting (e.g. fr-FR, ja-JP) |
| dateFormat | String | 'MMM d, yyyy' | Date display format pattern |
| dualCalendar | Boolean | false | Show two months side-by-side |
| Option | Type | Default | Description |
|---|---|---|---|
| showClearAll | Boolean | true | Show "Clear All" button |
| showSelectWeekdays | Boolean | true | Show "Select Weekdays" button (multiple/multi-range) |
| showSelectWeekends | Boolean | true | Show "Select Weekends" button (multiple/multi-range) |
| showSelectAllDays | Boolean | true | Show "Select All Days" button (multiple/multi-range) |
| selectedDatesDisplaySelector | String | null | CSS selector for an external display element |
| Option | Type | Default | Description |
|---|---|---|---|
| disabledDates | Array | [] | Dates to disable — strings (YYYY-MM-DD) or objects with from/to |
| disablePast | Boolean | false | Disable all dates before today |
| disableFuture | Boolean | false | Disable all dates after today |
| minDate | String | null | Minimum selectable date (YYYY-MM-DD) |
| maxDate | String | null | Maximum selectable date (YYYY-MM-DD) |
| Pattern | Description | Example |
|---|---|---|
| yyyy | 4-digit year | 2025 |
| yy | 2-digit year | 25 |
| MMMM | Full month name | January |
| MMM | Short month name | Jan |
| MM | 2-digit month | 01 |
| M | Month number | 1 |
| dd | 2-digit day | 05 |
| d | Day number | 5 |