Description
When using timepicker with minDate option, the minutes slider's min attribute is not recalculated when the hours slider changes. This causes the minutes slider to
remain restricted even when selecting hours greater than minDate.getHours().
Steps to Reproduce
- Initialize datepicker with timepicker: true and minDate: new Date() (e.g., current time is 14:35)
- Open the datepicker
- Move the hours slider forward (e.g., to 16 or 17)
- Try to set minutes to a value less than 35 (e.g., 01)
Expected Behavior
When hours > minDate.getHours(), the minutes slider should allow selecting any minute (0-59), since the time constraint only applies when hours ===
minDate.getHours().
Actual Behavior
The minutes slider remains restricted to minDate.getMinutes() (35 in this example), preventing selection of lower values even when hours are ahead of minDate.
Root Cause
In onChangeInputRange, when hours change:
- setMinMaxTime() is not called to recalculate minMinutes/maxMinutes
- Even if called, setMinTimeFromMinDate() uses lastSelectedDate.getHours() which is not yet updated with the new hours value
- updateSliders() is not called to update the min/max attributes on the minutes input range
Suggested Fix
In onChangeInputRange, when name === "hours":
- Recalculate minMinutes/maxMinutes using this.hours (already updated) instead of lastSelectedDate.getHours()
- Call updateSliders() to apply new min/max to the DOM
onChangeInputRange(e) {
let t = e.target;
this[t.getAttribute("name")] = t.value;
if ("hours" === t.getAttribute("name")) {
this.setMinMaxTimeFromOptions();
if (this.dp.minDate && isSameDay(this.dp.lastSelectedDate || new Date, this.dp.minDate)) {
this.minHours = this.dp.minDate.getHours();
// Use this.hours (new value) instead of lastSelectedDate.getHours()
this.minMinutes = this.hours > this.dp.minDate.getHours()
? this.opts.minMinutes
: this.dp.minDate.getMinutes();
}
if (this.dp.maxDate && isSameDay(this.dp.lastSelectedDate || new Date, this.dp.maxDate)) {
this.maxHours = this.dp.maxDate.getHours();
this.maxMinutes = this.hours < this.dp.maxDate.getHours()
? this.opts.maxMinutes
: this.dp.maxDate.getMinutes();
}
this.minutes = Math.min(Math.max(this.minutes, this.minMinutes), this.maxMinutes);
this.updateSliders(); // Update DOM
}
this.updateText();
this.dp.trigger(eventChangeTime, {hours: this.hours, minutes: this.minutes});
}
Version 3.6.0
Description
When using timepicker with minDate option, the minutes slider's min attribute is not recalculated when the hours slider changes. This causes the minutes slider to
remain restricted even when selecting hours greater than minDate.getHours().
Steps to Reproduce
Expected Behavior
When hours > minDate.getHours(), the minutes slider should allow selecting any minute (0-59), since the time constraint only applies when hours ===
minDate.getHours().
Actual Behavior
The minutes slider remains restricted to minDate.getMinutes() (35 in this example), preventing selection of lower values even when hours are ahead of minDate.
Root Cause
In onChangeInputRange, when hours change:
Suggested Fix
In onChangeInputRange, when name === "hours":
Version 3.6.0