jQuery UI Datepicker - adding the ability to select multiple dates on one calendar

Hello, dear readers of Habr!

This article is about jQuery UI and its date selection widget.

It often happens that on the page it is necessary to make the choice of the period of dates (and sometimes even several separate dates). But the jQuery UI Datepicker allows you to select only one date within the same calendar.
')
Therefore, a common solution in practice is the creation of two input fields with a control of the “from and to” type. You can also find a lot of "crutch" methods for solving this problem - this does not suit us.

So, our goal is to solve the problem with the minimum effort using only jQuery UI Datepicker .

To solve this problem, there is a small extension for jQuery UI Datepicker, which enhances its standard features without connecting third-party widgets, plug-ins and styles.

For those who don’t use the standard $ .datepicker () standard widget, I’ve prepared a couple of links, I hope you will also find them useful:

- Article about PickMeUp on habr (choice of several dates, choice of the period).
- Wonderful DateTimePicker plugin from XDSoft (choice of period of dates, choice of time and other various features), worth seeing

There are other solutions, but I will not dwell on them. If you have your favorite date selection calendars, I will be glad to read about them in the comments to the article.

Expansion Description

An extension is a file that extends the capabilities of the $ .datepicker () widget using its object model. Does not affect the performance of the Datepicker in the default mode. Therefore, do not worry that your (already written) code will stop working or will start to function differently.

The extension allows you to change the behavior of the date selection in two modes:

• Period selection (two dates: beginning and end of period)
• Select multiple dates (an array of dates)

Since the extension is planned to be used to select multiple dates, I recommend applying it to the DIV element (and not INPUT), and when selecting dates, fill in the corresponding values ​​in the input fields (see examples at the end of the article).

New widget features

New parameters $ .datepicker ()

$('#date_range').datepicker({ range: 'period', //  : period, multiple range_multiple_max: 3, //       " " onSelect: function(dateText, inst, extensionRange) { // extensionRange -   ,      } }); //  "setDate"    : 2   range="period"     range="multiple" // $('#date_range').datepicker('setDate', ['+2d', '+1w']); //    "onSelect"      (   ) //     ,            var extensionRange = $('#date_range').datepicker('widget').data('datepickerExtensionRange'); console.log(extensionRange.datesText); //   (  ,   datepicker) console.log(extensionRange.startDateText); //   (  ,   datepicker) console.log(extensionRange.endDateText); //   (  ,   datepicker) console.log(extensionRange.dates); //   ( ) console.log(extensionRange.startDate); //   ( ) console.log(extensionRange.endDate); //   ( ) 

New styles in the calendar cells

 .selected{} /*   */ .selected-start{} /*    */ .selected-end{} /*    */ .first-of-month{} /*    */ .last-of-month{} /*    */ 

Example 1 - period selection
Example 2 - select multiple dates
Example 3 - popup mode

Download - jquery.datepicker.extension.range.min.js

it is necessary to connect right after jQuery UI scripts
jQuery UI original datepicker widget required