Opened 3 years ago

Closed 3 years ago

#15190 closed bug (notabug)

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

Reported by: Manish Owned by:
Priority: minor Milestone: none
Component: ui.datepicker Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:

Description

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.

Change History (1)

comment:1 Changed 3 years ago by Scott González

Component: ui.coreui.datepicker
Resolution: notabug
Status: newclosed

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.

Note: See TracTickets for help on using tickets.