FlexiDatepicker

A lightweight, flexible, and powerful vanilla JavaScript datepicker with multiple selection modes. No dependencies required.

Features

• Four Selection Modes: Single, Multiple, Range, and Multi-Range
• Zero Dependencies: Pure vanilla JavaScript
• Lightweight: ~5.5kB minified
• Customizable: Extensive configuration options
• Responsive: Works on all devices
• Accessible: ARIA-compliant
• i18n Support: Built-in internationalization
• Date Restrictions: Min/max dates, disabled dates, past/future blocking
• Smart Controls: Quick select weekdays, weekends, or all days
• Custom Formatting: Flexible date format patterns

Demo

View Live Demo

Installation

CDN

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/leoanangmh/flexidatepicker@latest/dist/flexidatepicker.min.css">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/leoanangmh/flexidatepicker@latest/dist/flexidatepicker.umd.min.js"></script>

NPM

npm install flexidatepicker

yarn

yarn add flexidatepicker

Manual Download

Download the latest release from the releases page and include the files in your project:

<link rel="stylesheet" href="path/to/flexidatepicker.min.css">
<script src="path/to/flexidatepicker.js"></script>

Quick Start

Single Date Selection

<input type="text" id="single-date" placeholder="Select a date">

<script>
  new FlexiDatepicker('#single-date', {
    mode: 'single',
    dateFormat: 'MMM d, yyyy'
  });
</script>

Multiple Date Selection

<input type="text" id="multiple-dates" placeholder="Select multiple dates">

<script>
  new FlexiDatepicker('#multiple-dates', {
    mode: 'multiple'
  });
</script>

Date Range Selection

<input type="text" id="date-range" placeholder="Select a range">

<script>
  new FlexiDatepicker('#date-range', {
    mode: 'range',
    dateFormat: 'MM/dd/yyyy'
  });
</script>

Multi-Range Selection

<input type="text" id="multi-range" placeholder="Select multiple ranges">

<script>
  new FlexiDatepicker('#multi-range', {
    mode: 'multi-range',
    showSelectWeekdays: true,
    showSelectWeekends: true
  });
</script>

Configuration Options

Basic Options

Option	Type	Default	Description
mode	String	'multi-range'	Selection mode: 'single', 'multiple', 'range', 'multi-range'
locale	String	'en-US'	Locale for date formatting
dateFormat	String	'MMM d, yyyy'	Date display format

Display Options

Option	Type	Default	Description
selectedDatesDisplaySelector	String	null	CSS selector for external display element
showClearAll	Boolean	true	Show "Clear All" button
showSelectWeekdays	Boolean	true	Show "Select Weekdays" button (multiple/multi-range modes)
showSelectWeekends	Boolean	true	Show "Select Weekends" button (multiple/multi-range modes)
showSelectAllDays	Boolean	true	Show "Select All Days" button (multiple/multi-range modes)
dualCalendar	Boolean	true	Show Dual Calendar

Date Restrictions

Option	Type	Default	Description
disabledDates	Array	[]	Array of disabled dates (strings or objects with from/to)
disablePast	Boolean	false	Disable all past dates
disableFuture	Boolean	false	Disable all future dates
minDate	String	null	Minimum selectable date (YYYY-MM-DD)
maxDate	String	null	Maximum selectable date (YYYY-MM-DD)

Callbacks

Option	Type	Default	Description
onSelectionChange	Function	null	Callback when selection changes. Receives { ranges: [], dates: [] }

Date Format Patterns

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

Example Formats

'MMM d, yyyy'      // Jan 5, 2025
'MM/dd/yyyy'       // 01/05/2025
'd MMMM yyyy'      // 5 January 2025
'yyyy-MM-dd'       // 2025-01-05

Advanced Examples

With Callback Function

new FlexiDatepicker('#datepicker', {
  mode: 'range',
  onSelectionChange: function(data) {
    console.log('Selected ranges:', data.ranges);
    console.log('Selected dates:', data.dates);
    
    // Update your UI or send to server
    if (data.ranges.length > 0) {
      const range = data.ranges[0];
      console.log(`From ${range.start} to ${range.end}`);
    }
  }
});

With Disabled Dates

new FlexiDatepicker('#datepicker', {
  mode: 'single',
  disabledDates: [
    '2025-01-01', // New Year's Day
    '2025-12-25', // Christmas
    { from: '2025-07-01', to: '2025-07-07' } // Vacation week
  ],
  disablePast: true,
  minDate: '2025-01-01',
  maxDate: '2025-12-31'
});

With External Display

<input type="text" id="datepicker" placeholder="Select dates">
<div id="selected-display"></div>

<script>
  new FlexiDatepicker('#datepicker', {
    mode: 'multi-range',
    selectedDatesDisplaySelector: '#selected-display'
  });
</script>

Custom Styling

new FlexiDatepicker('#datepicker', {
  mode: 'range',
  locale: 'es-ES', // Spanish locale
  dateFormat: 'd/M/yyyy',
  showClearAll: true,
  showSelectWeekdays: false
});

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - see the LICENSE file for details

Support

• Documentation
• Issues
• Discussions

Acknowledgments

Built with vanilla JavaScript for maximum compatibility and performance.

Contributors