How to update Time Restraints in Timepicker plugin?-Collection of common programming errors

I’m using Timepicker plugin: http://trentrichardson.com/examples/timepicker/ . I want to update Time Restraints after date was changed. This’s my code:

var date = "10/02/2013";  // October, 02 2013
var time = "22:05";
$("#Date").datepicker({
                    minDate: 'today',
                    maxDate: date,
                    showOn: "button",
                    buttonImage: '@Url.Content("~/Images/Library/Calendar.png")',
                    buttonImageOnly: true,
                    onSelect: function (dateText) {
                        if (Date.parse(dateText) == Date.parse(date)) {
                            $('#Time').timepicker({
                                hourMax: time.split(':')[0],
                                minuteMax: time.split(':')[1]
                            });
                        }
                        else {

                            $('#Time').timepicker({
                                hourMax: 23,
                                minuteMax: 59
                            });
                        }
                    }
                });

I try to do it, but it doesn’t work

  1. You have given two undefined variables ‘date’ and ‘time’, that probably you have defined elsewhere in the script (i assume) …

    Assuming that these vars are, for example:

    var date = "10/02/2013";  // October, 02 2013
    var time = "22:05";
    

    your code should work (i’ve tested it).

    If you have a different date format you could try something like this:

     var fdate = "10/02/2013 22:05";
     var date = fdate.split(' ')[0];
     var time = fdate.split(' ')[1];
     .....
    
  2. I find a way to resolve my problem: When I choose another day I destroy timepicker and recreate it again.

    var date = "10/02/2013";
    var time = "22:05";
    $("#S-Date").datepicker({
                            minDate: 'today',
                            maxDate: date,
                            showOn: "button",
                            buttonImage: '@Url.Content("~/Images/Library/Calendar.png")',
                            buttonImageOnly: true,
                            onSelect: function (dateText) {
                                if (Date.parse(dateText) == Date.parse(date)) {
                                    $("#S-Time").val(formatTime12(time));
                                    $('#S-Time').timepicker('destroy');
                                    $('#S-Time').timepicker({
                                        hourMax: time.split(':')[0],
                                        minuteMax: time.split(':')[1]
                                    });
                                }
                                else {
                                    $('#S-Time').timepicker('destroy');
                                    $('#S-Time').timepicker({
                                        hourMax: 23,
                                        minuteMax: 59
                                    });
                                }
                            }
                        });