Version 1.1.5

FlexiDatepicker

The ultimate vanilla JavaScript date picker with four powerful selection modes. No dependencies, maximum flexibility.

Bundle SizeLicensejsDelivrnpm downloadsbuild status
View on GitHub
4 Selection Modes
Single date, multiple dates, date ranges, or multiple ranges - all in one library.
Zero Dependencies
Pure vanilla JavaScript with no framework requirements. Works everywhere.
Developer Friendly
Simple API, extensive options, callbacks, and comprehensive documentation.
Feature Rich
Disabled dates, min/max ranges, locale support, custom formatting, and more.

Quick Start

Get up and running in seconds

CDN InstallationRecommended
Fastest way to get started - no downloads required
<!-- Include CSS from CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/leoanangmh/flexidatepicker@1.1.5/dist/flexidatepicker.min.css">
<!-- Include JS from CDN -->
<script src="https://cdn.jsdelivr.net/gh/leoanangmh/flexidatepicker@1.1.5/dist/flexidatepicker.umd.min.js"></script>

Why use CDN?

  • • No build process required
  • • Automatic caching and fast global delivery
  • • Easy version management
Install via npm / yarnFor Bundlers
For projects using React, Next.js, or bundlers.
npm install flexidatepicker
yarn add flexidatepicker

Why use npm/yarn?

  • • Integrates with your build process (Vite, Next.js, etc.)
  • • Enables tree-shaking and bundle optimization
  • • Manages versions and dependencies in `package.json`

Interactive Examples

Try out all four selection modes

Single Date Selection
Select a single date - perfect for birth dates, appointments, and deadlines
new FlexiDatepicker('#datepicker', {
  mode: 'single',
  dateFormat: 'MMM d, yyyy'
});

Complete Documentation

Every configuration option explained with examples

mode
Selection mode for the datepicker
singleSelect one date only. Perfect for birthdays, appointments, deadlines.
multipleSelect multiple individual dates. Great for event scheduling, availability tracking.
rangeSelect a continuous date range. Ideal for hotel bookings, vacation planning.
multi-rangeSelect multiple non-contiguous ranges. Advanced scheduling and availability.
Type:stringDefault:'multi-range'
locale
Internationalization support for dates and month names

Customize the language and regional format of your datepicker. Supports any valid BCP 47 locale string (e.g., 'en-US', 'es-ES', 'fr-FR', 'ja-JP', 'ar-SA').

// English (US)
new FlexiDatepicker('#date1', {
  locale: 'en-US',
  mode: 'single'
});

// Spanish
new FlexiDatepicker('#date2', {
  locale: 'es-ES',
  mode: 'single'
});

// Japanese
new FlexiDatepicker('#date3', {
  locale: 'ja-JP',
  mode: 'single'
});
Type:stringDefault:'en-US'
dateFormat
Customize how dates are displayed

Control the format of dates displayed in the input field and throughout the datepicker. Use tokens to build your custom format.

// Format options:
// yyyy - Full year (2024)
// yy - Two digit year (24)
// MMMM - Full month name (January)
// MMM - Short month name (Jan)
// MM - Two digit month (01)
// M - Single digit month (1)
// dd - Two digit day (05)
// d - Single digit day (5)

// Examples:
new FlexiDatepicker('#date1', {
  dateFormat: 'MMM d, yyyy' // Jan 15, 2024
});

new FlexiDatepicker('#date2', {
  dateFormat: 'yyyy-MM-dd' // 2024-01-15
});

new FlexiDatepicker('#date3', {
  dateFormat: 'dd/MM/yyyy' // 15/01/2024
});

new FlexiDatepicker('#date4', {
  dateFormat: 'MMMM d, yyyy' // January 15, 2024
});
Type:stringDefault:'MMM d, yyyy'
disabledDates
Prevent selection of specific dates or ranges

Disable specific dates or entire date ranges from being selected. Useful for blocking holidays, weekends, or unavailable periods.

// Disable specific dates
new FlexiDatepicker('#date1', {
  mode: 'single',
  disabledDates: ['2024-12-25', '2024-01-01']
});

// Disable date ranges
new FlexiDatepicker('#date2', {
  mode: 'range',
  disabledDates: [
    { from: '2024-07-01', to: '2024-07-15' },
    { from: '2024-12-20', to: '2024-12-31' }
  ]
});

// Mix specific dates and ranges
new FlexiDatepicker('#date3', {
  mode: 'multiple',
  disabledDates: [
    '2024-03-15',
    { from: '2024-06-01', to: '2024-06-10' },
    '2024-09-20'
  ]
});
Type:ArrayDefault:[]
minDate / maxDate
Restrict the selectable date range

Set minimum and maximum dates to restrict the selectable range. Dates outside this range will be disabled.

// Restrict to a specific date range
new FlexiDatepicker('#datepicker', {
  mode: 'range',
  minDate: '2024-01-01',
  maxDate: '2024-12-31'
});

// Only allow future dates after today
const today = new Date().toISOString().split('T')[0];
new FlexiDatepicker('#future-only', {
  mode: 'single',
  minDate: today
});

// Only allow dates in the next 30 days
const thirtyDaysLater = new Date();
thirtyDaysLater.setDate(thirtyDaysLater.getDate() + 30);
new FlexiDatepicker('#next-30-days', {
  mode: 'range',
  minDate: today,
  maxDate: thirtyDaysLater.toISOString().split('T')[0]
});
Type:string (YYYY-MM-DD)Default:null
disablePast / disableFuture
Quick restrictions for past or future dates

Quickly disable all past or future dates relative to today. Great for booking systems and appointment scheduling.

// Disable all past dates
new FlexiDatepicker('#no-past', {
  mode: 'single',
  disablePast: true
});

// Disable all future dates
new FlexiDatepicker('#no-future', {
  mode: 'single',
  disableFuture: true
});

// Only allow today and future dates
new FlexiDatepicker('#today-onwards', {
  mode: 'range',
  disablePast: true
});
Type:booleanDefault:false
Control Buttons
Toggle visibility of quick selection buttons

Control which quick selection buttons appear in the datepicker. Only shown in 'multiple' and 'multi-range' modes.

showClearAllShow button to clear all selections
showSelectWeekdaysShow button to select all weekdays (Mon-Fri)
showSelectWeekendsShow button to select all weekends (Sat-Sun)
showSelectAllDaysShow button to select all days in current month
// Show all control buttons
new FlexiDatepicker('#all-buttons', {
  mode: 'multi-range',
  showClearAll: true,
  showSelectWeekdays: true,
  showSelectWeekends: true,
  showSelectAllDays: true
});

// Minimal configuration - no buttons
new FlexiDatepicker('#no-buttons', {
  mode: 'range',
  showClearAll: false,
  showSelectWeekdays: false,
  showSelectWeekends: false,
  showSelectAllDays: false
});

// Custom button combination
new FlexiDatepicker('#custom-buttons', {
  mode: 'multiple',
  showClearAll: true,
  showSelectWeekdays: true,
  showSelectWeekends: false,
  showSelectAllDays: false
});
Type:booleanDefault:true
onSelectionChange
Callback function triggered when selection changes

Receive updates whenever the user selects or deselects dates. The callback receives an object with ranges (for range modes) and dates (for single/multiple modes).

// Get selection data in real-time
new FlexiDatepicker('#datepicker', {
  mode: 'multi-range',
  onSelectionChange: (data) => {
    console.log('Ranges:', data.ranges);
    console.log('Dates:', data.dates);
    
    // Update UI based on selection
    if (data.ranges.length > 0) {
      document.getElementById('output').textContent = 
        `Selected ${data.ranges.length} range(s)`;
    }
  }
});

// Example with validation
new FlexiDatepicker('#booking', {
  mode: 'range',
  onSelectionChange: (data) => {
    if (data.ranges.length > 0) {
      const range = data.ranges[0];
      const start = new Date(range.start);
      const end = new Date(range.end);
      const days = (end - start) / (1000 * 60 * 60 * 24);
      
      if (days > 14) {
        alert('Maximum booking period is 14 days');
      }
    }
  }
});
Type:functionParameters:{ ranges: [], dates: [] }
selectedDatesDisplaySelector
Display selected dates in a custom element

Specify a CSS selector for an element where selected dates/ranges will be displayed. The element's content will automatically update as selections change.

<!-- HTML -->
<input id="datepicker" type="text" readonly>
<div id="selected-display"></div>

<!-- JavaScript -->
<script>
new FlexiDatepicker('#datepicker', {
  mode: 'multi-range',
  selectedDatesDisplaySelector: '#selected-display'
});
</script>
Type:string (CSS selector)Default:null

Advanced Configuration

Full control with extensive options

All Options
Customize every aspect of the datepicker
new FlexiDatepicker('#datepicker', {
  mode: 'range',
  locale: 'en-US',
  dateFormat: 'yyyy-MM-dd',
  disablePast: true,
  minDate: '2024-01-01',
  maxDate: '2024-12-31',
  disabledDates: ['2024-03-15', '2024-03-20'],
  showClearAll: true,
  showSelectWeekdays: true,
  showSelectWeekends: true,
  dualCalendar: true,
  onSelectionChange: (data) => {
    console.log(data.ranges, data.dates);
  }
});
Options
  • mode - Single, multiple, range, or multi-range
  • locale - International locale support
  • dateFormat - Customize date display format
  • disabledDates - Disable specific dates or ranges
  • minDate / maxDate - Restrict selectable range
  • dualCalendar - Restrict Dual Calendar
Features
  • disablePast / disableFuture - Restrict time direction
  • onSelectionChange - Callback on date selection
  • showClearAll - Toggle clear button
  • showSelectWeekdays/Weekends - Quick selections
  • RTL language support built-in

Ready to get started?

FlexiDatepicker is free, open-source, and ready to use in your projects.