Question

使用jQuery 1.9.1＆amp; jQuery-ui 1.10.3并使用微调器作为时间控件。使用页面上的日期选择器选择一个Start＆amp;结束日期。

我让旋转器工作了一段时间（小时），但也希望能够重置它。如果开始＆amp;结束日期是相同的，但如果我更改开始日期或结束日期，我希望能够重置微调器而无需再次加载页面。

例如，如果我选择10/31/2013作为日期（开始日期和结束日期），则微调器将相应地进行换行＆amp;我能够将一个微调器设置为5，将另一个设置为16。

如果我将一个日期更改为11/01/2013（结束日期），我希望旋转器重置为页面加载时的任何内容（它们中没有任何内容）。如果我在选择上述内容后更改日期，则5＆amp; 16仍在纺纱厂中展示。但是，如果我设置微调器值=“”，那么我在旋转器的更改事件中的检查会触发＆amp;显示我对无效值的消息。

如何将微调器重置为空（新日期=重新初始化微调器）？以下内容：

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

不起作用。

对于我所缺少的任何帮助表示感谢。

谢谢！

修改

以下是其中一个日期选择器的代码。当页面加载时，它会得到最小的＆amp;表中的最大日期，然后当选择1个datepicker时，它设置max＆amp;另一个的最小日期，从另一个日期选择器上的日期开始的未选择的一到14天。

当一个日期选择器被更改时，我希望它重新初始化/重置时间选择器，因为如果日期改变，它们最初设置的值可能不适用 - 我想强制用户重新选择开始和放大器;结束了纺纱厂的时间。问题是，将它们重置为“”会使时间旋转器上的更改事件发生火灾。给了我一个错误。

虽然我只包括其中一个，但每个选择器中的另一个选择器的名称相似。 Datepicker1是一个开始日期，datepicker2是结束日期，start＆amp;结束微调器。我还省略了代码（由注释替换），该代码根据微调器中的选择调用函数来重新加载下拉框。

$(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");
                    }
                }

    });
});

下面是一个微调器功能。我不确定如何在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's 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;
                    } 
                }
        });
});

Answer 1

在重置功能上调用jQuery更改方法....... 的jquery（＆＃34;＃startTimeSpinner＆＃34）的变化（）; jQuery的（＆＃34;＃endTimeSpinner＆＃34）。变化（）;

Answer 2

试试这个： $("#startSpin").val("");

我认为您不必更改微调器选项中的任何内容，只需重置输入值即可。这是一些简单的jsFiddle。

jQuery UI Spinner - 用作Time微调器时重置该值

2 个答案: