jQuery UI Spinner - сброс значения при использовании в качестве счетчика времени

Использование jQuery 1.9.1 и jQuery-ui 1.10.3 и использование счетчика в качестве контроля времени. Используя datepicker на странице, выберите дату начала и окончания.

У меня есть счетчик, работающий на поле времени (часы), но он также хотел его сбросить. Он отлично работает, если дата начала и окончания одинакова, но если я изменил дату начала или окончания, я захотел сбросить счетчик, не загружая страницу снова.

Например, если я выбираю 10/31/2013 в качестве даты (как даты начала, так и конца), прядильщики будут обертываться соответственно, и я могу установить один счетчик в 5, а другой - в 16.

Если я изменю одну дату на 11/01/2013 (дата окончания), я бы хотел, чтобы прядильщики сбросили все, что было при загрузке страницы (тогда у них ничего нет). Если я изменил дату после выбора выше, 5 и 16 все еще отображаются в прядильщиках. Однако, если я установил значения spinner = "", проверка, которую я провела в событии изменения для счетчика, вызывает и выводит сообщение, которое у меня есть для недопустимого значения.

Как вы можете сбросить счетчик, чтобы он был пустым (новая дата = повторная инициализация прядильщиков)? Следующие:

$("#startSpin").spinner("value","")

не работает.

Был бы признателен за любую помощь в том, что мне не хватает.

Благодарю!

РЕДАКТИРОВАТЬ

Вот код для одного из сборщиков дат. Когда страница загружается, она получает минимальную и максимальную дату из таблицы, а затем, когда выбрано 1 datepicker, она устанавливает дату max & min на другой, не выбранную на 14 дней с даты на другой datepicker.

Когда параметр datepicker изменен, я хочу, чтобы он повторно инициализировал/сбросил timepickers, поскольку значения, которые они устанавливают для изначально, могут быть неприменимы, если изменение даты - я хочу заставить пользователя повторно выбрать время начала и окончания прядильщиков. Проблема заключается в том, что сброс их на "" делает событие изменения во время сжигания счетчика времени и дает мне ошибку.

Хотя я включаю только один из них, у меня есть другой из каждого селектора, который называется аналогично. Datepicker1 - дата начала, datepicker2 - дата окончания, то же самое для start & end spinners. Я также пропустил код (замененный комментарием), который вызывает функцию для перезагрузки выпадающих ящиков на основе выбора в счетчике.

$(function(){
    $("#datepicker2").datepicker({
        dateFormat: "yy-mm-dd",
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        changeMonth: true,
        changeYear: true,
        buttonImage: "calendar-blue.png",
        buttonImageOnly: true,
        buttonText: "Choose End Date",
        showOn: "both",
        numberOfMonths: 1,
        beforeShow: function(input, inst) {
                $(".ui-datepicker").addClass("resizeDP");
                },
        onClose: function(selectedDate) {
                $(".ui-datepicker").removeClass("resizeDP");
                },
        onSelect: function(dateText, inst) {
                var m = dateText.substring(5,7);
                var d = dateText.substring(8,10);
                var y = dateText.substring(0,4);
                var newDate = $(this).datepicker("getDate");
                var check2 = $("#datepicker2").datepicker("getDate");// - "14d"
                check2.setDate(check2.getDate() - vhistDayInterval );
                var tmpStartDateVal = $("#datepicker1").datepicker("getDate");
                var tmpStartDateVal2 = $("#datepicker1").val();
                console.log("datepicker2  - s = " + $("#datepicker1").val() + "      e = " + $("#datepicker2").val() );
                vhistEndDate = $("#datepicker2").val();  
                if (tmpStartDateVal == null) {
                    $("#datepicker1").datepicker("option", "minDate", check2);
                    $("#datepicker1").datepicker("option", "maxDate", $("#datepicker2").datepicker("getDate"));
                    var c1Min = $("#datepicker1").datepicker("option","minDate");
                    var c1Max = $("#datepicker1").datepicker("option","maxDate");
                    }
                else {
                    console.log("spinner change set to off");
                    $("#startTimeSpinner").off("change");
                    $("#endTimeSpinner").off("change");
                    $("#startTimeSpinner").spinner("value", "");
                    $("#endTimeSpinner").spinner("value", "");

                    $("#startTimeSpinner").spinner("enable");
                    $("#endTimeSpinner").spinner("enable");
                    }
                }

    });
});

Ниже приведена одна из функций spinner. Я не знал, как включить все это в jsFiddle.

$(function() {
    $("#endTimeSpinner").spinner({
        numberFormat: "d2",
        spin: function(event, ui) {
            console.log("in endtTime spinner - start time = " + $("#startTimeSpinner").spinner("value") + "   end time = " + $("#endTimeSpinner").spinner("value") + "   start Date = " + myStartDate + "   end date = " + myEndDate);
            if (myStartDate === myEndDate) {
//              console.log("End Spinner - Start and End Date are EQUAL");
                if ( $("#startTimeSpinner").spinner("value") == null) {
//                  console.log("Start Time not set");  
                    }
                else {
//                  console.log("EndTime Spinner - start = " + $("#startTimeSpinner").spinner("value") + "     end = " + ui.value );
                    if (ui.value > 23) {
                        $(this).spinner("value", $("#startTimeSpinner").spinner("value") );
//                      $(this).spinner("value", 0);
//                      console.log("EndTime Spinner - start = " + $("#startTimeSpinner").spinner("value") + "     end = " + ui.value );
                        myStartHr = $("#startTimeSpinner").spinner("value");
                        myEndHr = $("#endTimeSpinner").spinner("value");
                        // do stuff in a function to reload dropdowns 
                        return false;
                        }
                    else if ( (ui.value < 0) || (ui.value < $("#startTimeSpinner").spinner("value") ) ) {
                            $(this).spinner("value", 23);
//                          console.log("EndTime Spinner - start = " + $("#startTimeSpinner").spinner("value") + "     end = " + ui.value );
                            myStartHr = $("#startTimeSpinner").spinner("value");
                            myEndHr = $("#endTimeSpinner").spinner("value");
                        // do stuff in a function to reload dropdowns                           return false;
                            }
                    }
                }
            else {
//              console.log("Start Spinner - Start and End Date DIFFERENT " );
                if (ui.value > 23) {
                    $(this).spinner("value", 0);
                    myStartHr = $("#startTimeSpinner").spinner("value");
                    myEndHr = $("#endTimeSpinner").spinner("value");
                        // do stuff in a function to reload dropdowns                   return false;
                        }
                else if (ui.value < 0) {
                    $(this).spinner("value", 23);
                    myStartHr = $("#startTimeSpinner").spinner("value");
                    myEndHr = $("#endTimeSpinner").spinner("value");
                        // do stuff in a function to reload dropdowns                   return false;
                        }
                }
            },
        change: function(event, ui) {
            console.log("endTime spinner CHANGE - start  time = " + $("#startTimeSpinner").spinner("value")+ "   end time = " + $("#endTimeSpinner").spinner("value") + "   start Date = " + myStartDate + "   end date = " + myEndDate);
            if (typeof( $(this).spinner("value")) === "number") {
                if (myStartDate === myEndDate) {
                    console.log("End Spinner - Start and End Date are EQUAL");
                        if ( $("#startTimeSpinner").spinner("value") == null) {
                            console.log("Start Time not set");  
                            }
                        else {
                            console.log("Start Time has been set ");
////                            if ( $("#startTimeSpinner").spinner("value")  > $("#endTimeSpinner").spinner("value") ) {
                            if ( $("#startTimeSpinner").spinner("value")  > $("#endTimeSpinner").spinner("value") ) {
                                console.log("start Time spinner > end time spinner  -  s = " + $("#startTimeSpinner").spinner("value") + "   e = " + $("#endTimeSpinner").spinner("value") );
                                $(this).spinner("value", 0);
                                myStartHr = $("#startTimeSpinner").spinner("value");
                                myEndHr = $("#endTimeSpinner").spinner("value");
                        // do stuff in a function to reload dropdowns                               return false;
                                }
                            else {
                                console.log("start Time spinner <= end time spinner  -  s = " + $("#startTimeSpinner").spinner("value") + "   e = " + $("#endTimeSpinner").spinner("value") );
////                                if ( $("#startTimeSpinner").spinner("value") < 0) {
                                if ( $("#endTimeSpinner").spinner("value") > 23) {
////                                    $(this).spinner("value", $("#endTimeSpinner").spinner("value") );
                                    $(this).spinner("value", $("#startTimeSpinner").spinner("value") );
                                    myStartHr = $("#startTimeSpinner").spinner("value");
                                    myEndHr = $("#endTimeSpinner").spinner("value");
                        // do stuff in a function to reload dropdowns                                   return false;
                                    } // else < 0
                            else {
                                    myStartHr = $("#startTimeSpinner").spinner("value");
                                    myEndHr = $("#endTimeSpinner").spinner("value");
                                    console.log("all ok start = " +myStartHr + "     end = " + myEndHr );
                        // do stuff in a function to reload dropdowns                                   return false;
                                }
                                }// else start time <= end time
                            }// else end time is set
                    }// dates are equal
//              }
            else {
//              console.log("End Spinner - Start and End Date DIFFERENT " );
                if ($(this).spinner("value") > 23) {
                    $(this).spinner("value", 0);
                    myStartHr = $("#startTimeSpinner").spinner("value");
                    myEndHr = $("#endTimeSpinner").spinner("value");
                        // do stuff in a function to reload dropdowns                   return false;
                    }
                else if ($(this).spinner("value") < 0) {
                        $(this).spinner("value", 23);
                        myStartHr = $("#startTimeSpinner").spinner("value");
                        myEndHr = $("#endTimeSpinner").spinner("value");
                        // do stuff in a function to reload dropdowns                       return false;
                        }
//              console.log("change event - " + $(this).spinner("value") );
                } // else start and end date are different
            } // if typeof spinner = number
                else {  // it not a number
                    var invalidEntryVal = event.target.value;
                    $(this).spinner("value", "");
                    var invMsg = "Invalid entry - " + invalidEntryVal + ". Must be in HH format.";
                    $("#endTimeMsg").html(invMsg);
                    return false;
                    } 
                }
        });
});