Unable to enforce a date range for two mutually connected date pickers

[Manish]

I am trying to use jQuery UI DatePicker to allow users to choose a date period where the difference between the start and end dates is no more than 12 calendar months. The users can choose to start by selecting either the start date or the end date. They should then be restricted to select the other date only within a 12 month period between the already selected date.

A working example is available at ​https://jsfiddle.net/dknbwtnv/. Selecting any one date works fine but it immediately clears the other date. Therefore, the users can never select both dates successfully.

I have traced the problem to the _optionDatepicker method of the DatePicker widget (​https://github.com/jquery/jquery-ui/blob/master/ui/widgets/datepicker.js). Towards the end, this method calls this._setDate, this._updateAlternate and this._updateDatepicker. For some reason, the date value being passed to _setDate is null and hence that method ends up clearing the target element. A simple check such as:

if (date) this._setDate(inst, date);

gets rid of the problem and the users are able to select both dates correctly.

[Scott González]

There are two problems with your code:

1. You're adding months instead of subtracting them to calculate your start date's minDate.
2. You're treating datepicker as a month picker instead, which isn't supported.

See ​https://jsfiddle.net/7Ly3kj83/ for a working example.