Update the jquery timepicker addon from a date picker

Question

I have two input fields, one with a date picker and one with a timepicker (showing only the time sliders, without the calendar). I wanted to show a different time span in the time picker, if Saturday has been selected in the datePicker. So, the html is like this

<input id="datePicker" type="text" name="date"/>
<input id="timePicker" type="text" name="time"/>

The javascript looks like this

$("#datePicker").datepicker({
  dateFormat : "dd/mm/yy",
  onSelect: function(dateText, instance) {
    var date = $.datepicker.parseDate("dd/mm/yy",  dateText);
    var isWeekend = !$.datepicker.noWeekends(date)[0];
    if (isWeekend) {
      $("#timePicker").timepicker('options','hourMax', 15);
    }
    else {
      $("#timePicker").timepicker('options','hourMax', 22);
    }
  }
});
$("#timePicker").timepicker({
  hourMin : 8,
  hourMax : 22,
  stepMinute : 15,
  timeOnly: true,
  timeFormat : "HH:mm"
}); 

The problem with the code above is that it isn't updating the max hours in the timepicker and it is showing some kind of error in the console when I try to choose a new time (the error doesn't affect the timespan functionality): Error parsing the date string: Unexpected literal at position 2 date string = 22:00 date format = dd/mm/yy I am using

• jquery-1.8.3.min.js
• jquery-ui-1.9.2.custom.min.js
• version 1.2.1 of time picker (http://trentrichardson.com/examples/timepicker/)

Answer 1

Try replacing the code you posted with the one below. .timepicker constructor looks for the hasDatepicker class if it doesn't find it it re-draws the ui timepicker divs. JsFiddle

$("#datePicker").datepicker({
                        dateFormat: "dd/mm/yy",
                        onSelect: function (dateText, instance) {
                            var date = $.datepicker.parseDate("dd/mm/yy", dateText);
                            var isWeekend = !$.datepicker.noWeekends(date)[0];
                            alert(isWeekend);
                            if (isWeekend) {
                                $("#timePicker").removeClass("hasDatepicker");
                                $("#timePicker").timepicker({
                                    hourMin: 8,
                                    hourMax: 15,
                                    stepMinute: 15,
                                    timeOnly: true,
                                    timeFormat: "HH:mm"
                                });
                            } else {
                                 $("#timePicker").removeClass("hasDatepicker");
                                $("#timePicker").timepicker({
                                    hourMin: 8,
                                    hourMax: 22,
                                    stepMinute: 15,
                                    timeOnly: true,
                                    timeFormat: "HH:mm"
                                });
                            }
                        }
                    });