Reputation: 1243

jQuery UI Spinner - resetting the value when used as a Time spinner

Using jQuery 1.9.1 & jQuery-ui 1.10.3 and using a spinner as a time control. Using a datepicker on the page to pick a Start & End date.

I've got the spinner working for a time field (hours), but wanted to be able to reset it also. It works fine if the start & end date are the same, but if I change either the start or end date, I wanted to be able to reset the spinner without loading the page again.

For example, if I choose 10/31/2013 as the date (both start & end date), the spinners will wrap accordingly & I'm able to set one spinner at 5 and the other at 16.

If I change one date to be 11/01/2013 (end date) I would want the spinners to reset to whatever they were when the page loaded (they have nothing in them then). If I change the date after selecting the above, 5 & 16 are still showing in the spinners. However, if I set the spinner values = "", the check I have in the change event for the spinner fires & displays the message I have for an invalid value.

How can you reset a spinner to be empty (a new date = re-initialize spinners)? The following:

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

does not work.

Would appreciate any help on what I'm missing.

Thanks!

EDIT

Here is code for one of the date pickers. When the page loads, it gets a minimum & maximum date from a table, and then when 1 datepicker is selected, it sets the max & min date on the other, unselected one to 14 days from the date on the other datepicker.

When a datepicker gets changed, I want it to re-initialize/reset the timepickers since the values they are set for initially may not be applicable if the date changes - I want to force the user to re-select the start & end times out of the spinners. Problem is, resetting them to "" makes the change event on the time spinner fire & gives me an error.

Although I'm only including one of each, I have another of each selector that is named similarly. Datepicker1 is a start date, datepicker2 is an end date, same for start & end spinners. I've also omitted code (replaced by a comment) that calls a function to reload dropdown boxes based on the selections in the spinner.

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

    });
});

Below is one of the spinner functions. I was unsure how to include all of this in a 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;
                    } 
                }
        });
});

Upvotes: 0