Skip to main content

Search and Top Navigation

#10661 closed bug (duplicate)

Opened October 17, 2014 10:59AM UTC

Closed October 17, 2014 11:41AM UTC

datepicker: keyboard input enables all disabled dates

Reported by: hackr Owned by:
Priority: minor Milestone: none
Component: ui.datepicker Version: 1.11.1
Keywords: Cc:
Blocked by: Blocking:
Description

Hello,

I am using jquery datepicker for simple checkin, checkout dates case. I have two input boxes which are attached to a datepicker. I am also blocking the dates in datepicker using my backend calendar data. This entire setup works perfectly when user selects dates by clicking/selecting checkin and checkout dates using mouse. All validation like User cannot select blocked/disabled dates in calendar etc. function properly with mouse interactions. Below is the code which is in Place in my JS file:

$( "#checkin" , "#checkout" ).datepicker({

dateFormat: 'mm/dd/yy' ,

firstDay: 1 ,

numberOfMonths: 1 ,

showButtonPanel: false ,

minDate: new Date (),

beforeShow: function (input, obj) {

code to update calendar availability using backend data

add classes to td tags to block/disable dates

NOTE: no AJAX here, calendar data is available for required months

},

onSelect: function (date, inst){

nothing much here

few flags for later processing and some code to handle touch devices

},

onClose: function (dateText, inst) {

code to handle validations of user selection

// set focus on checkin/checkout textboxes deepending on few conditions

},

onChangeMonthYear: function (year, month, inst){

// code to update availability of calendar when user clicks on next/prev month buttons

// update classes of td tags in date picker div to disable/block dates

}

});

HTML

....

<div class = "checkin" >

<label> Check - In </label>

<input id= "checkin" class = "hasDatepicker" type= "text" placeholder= "mm/dd/yyyy" autocomplete= "off" >

</div>

<div class = "checkout" >

<label> Check - Out </label>

<input id= "checkout" class = "hasDatepicker" type= "text" placeholder= "mm/dd/yyyy" autocomplete= "off" >

</div>

...

Above code works fine when user interacts with datepicker via mouse but as soon as user start typing into textboxes, the datepicker shows up, date entered by user is highlighted in calendar (which is fine) but all blocked dates are enabled (classes of all td tags in calendar is set to " ") and entire feature is broken.

How can I intercept user typing dates into textboxes? I have so far tried many options like:

1. handle .change() on textboxes -> its only triggered once I move focus out of text boxes

2. onSelect() method in datepicker -> this never gets triggered when user types in date in textboxes

3. handle .keypress() on textboxes -> this is getting triggered but not sure why all disabled/blocked dates still gets enabled ?

Is this feature or bug in the implementaion ?

I posted same question on jquery forum also https://forum.jquery.com/topic/datepicker-keyboard-input-enables-all-disabled-dates.

Any help is appreciated. Thanks!

Attachments (0)
Change History (1)

Changed October 17, 2014 11:41AM UTC by scottgonzalez comment:1

resolution: → duplicate
status: newclosed

Duplicate of #10535.