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:

1. $( "#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

1. ....

   <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 ?

Any help is appreciated. Thanks!