Select Multiple Dates & Date Ranges in jQuery - MultiDatesPicker

MultiDatesPicker is a tiny and easy-to-use jQuery plugin that enhances the jQuery UI datepicker by allowing your users to select multiple dates or date ranges on a calendar interface.

It can be useful for websites and web applications requiring complex date management, such as booking systems, event planning, and project scheduling.

Features:

• Multiple Date Selection: Choose non-sequential dates easily.
• Date Ranges: Select ranges of dates relative to a specific starting date.
• Max Date Limit: Restrict users to select a maximum number of dates.
• Unavailable Dates: Define certain dates as unavailable for selection.

How to use it:

1. Install MultiDatesPicker using a package manager you prefer or download it directly on this page.

# Yarn
$ yarn add jquery-ui-multidatespicker

# NPM
$ npm install jquery-ui-multidatespicker

2. Load the MultiDatesPicker plugin's JavaScript and CSS files in your HTML document which has jQuery and jQuery UI installed.

<!-- jQuery & jQuery UI is required -->
<script src="/path/to/cdn/jquery.min.js"></script>
<link rel="stylesheet" href="/path/to/cdn/jquery-ui.css">
<script src="/path/to/cdn/jquery-ui.min.js"></script>

<!-- jQuery MultiDatesPicker Plugin -->
<link rel="stylesheet" href="jquery-ui.multidatespicker.css" />
<script src="jquery-ui.multidatespicker.js"></script>

3. Define a container element that will hold the date selection calendar.

<div id="example"></div>

4. Initialize the MultiDatesPicker on the container.

$('#example').multiDatesPicker({
  // options here
});

5. To show the selected dates in a specific input field, use the altField option.

<input type="text" id="output">

$('#example').multiDatesPicker({
  altField: '#output'
});

6. Customize the plugin further with these additional options:

$('SELECTOR').multiDatesPicker({

  // Custom separator for the date string
  separator: ', ',

  // Array of dates to pre-select
  addDates: [],

  // Array of dates to disable
  addDisabledDates: [],

  // 'normal' for individual dates, or 'daysRange' for date ranges 
  mode: 'normal',

  // Maximum number of dates to select
  maxPicks: 5,

  // Range of dates available for selection
  pickableRange: 5,

  // Maintain pickable days even with disabled dates
  adjustRangeToDisabled: true,

  // Automatically select ranges
  autoselectRange: [],

  // Minimum date (today)
  minDate: 0,

  // Maximum date (30 days from today)
  maxDate: 30
  
});

7. Use callback functions to hook into different events.

$('SELECTOR').multiDatesPicker({

  beforeShow: unction(input, inst) {},
  onSelect: function(dateText, inst) {},
  beforeShowDay: function(date) {},

});

8. API methods.

/ Get the index of today's date
$('SELECTOR').multiDatesPicker('gotDate', new Date());

// Add today's date
$('SELECTOR').multiDatesPicker('addDates', new Date());

// Remove the first selected date
$('SELECTOR').multiDatesPicker('removeIndexes', 0);

// Remove today's date
$('SELECTOR').multiDatesPicker('removeDates', new Date());

// Reset disabled dates
$('SELECTOR').multiDatesPicker('resetDates', 'disabled');

// Toggle today's date
$('SELECTOR').multiDatesPicker('toggleDate', new Date());

// Get selected dates
var dates = $('SELECTOR').multiDatesPicker('getDates');

// Get the string value of the selected dates
var datesString = $('SELECTOR').multiDatesPicker('value');

// Set the value of the selected dates
$('SELECTOR').multiDatesPicker('value', '2/19/1985, 11/14/2009');

// Destroy the plugin instance
$('SELECTOR').multiDatesPicker('destroy');

Changelog:

v1.6.9 (2025-01-15)

• trigger change when updating value

2024-12-19

• now compatible with latest jQuery and jQuery UI

---

This awesome jQuery plugin is developed by dubrox. For more Advanced Usages, please check the demo page or visit the official website.