Skip to main content

Search and Top Navigation

#15190 closed bug (notabug)

Opened May 19, 2017 10:13AM UTC

Closed May 19, 2017 11:46AM UTC

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

Reported by: manish-in-java 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.

Attachments (0)
Change History (1)

Changed May 19, 2017 11:46AM UTC by scottgonzalez comment:1

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.