title: jQuery UI Spinner - resetting the value when used as a Time spinner
body: <p>Using jQuery 1.9.1 &amp; jQuery-ui 1.10.3 and using a spinner as a time control.  Using a datepicker on the page to pick a Start &amp; End date.  </p>
  
  <p>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 &amp; 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.  </p>
  
  <p>For example, if I choose 10/31/2013 as the date (both start &amp; end date), the spinners will wrap accordingly &amp; I'm able to set one spinner at 5 and the other at 16.  </p>
  
  <p>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 &amp; 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 &amp; displays the message I have for an invalid value.  </p>
  
  <p>How can you reset a spinner to be empty (a new date = re-initialize spinners)? The following:</p>
  
  <p><code>$("#startSpin").spinner("value","")</code></p>
  
  <p>does not work.  </p>
  
  <p>Would appreciate any help on what I'm missing.</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is code for one of the date pickers.  When the page loads, it gets a minimum &amp; maximum date from a table, and then when 1 datepicker is selected, it sets the max &amp; min date on the other, unselected one to 14 days from the date on the other datepicker.  </p>
  
  <p>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 &amp; end times out of the spinners.  Problem is, resetting them to "" makes the change event on the time spinner fire &amp; gives me an error. </p>
  
  <p>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 &amp; 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.</p>
  
  <pre><code>$(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");
                      }
                  }
  
      });
  });
  </code></pre>
  
  <p>Below is one of the spinner functions.  I was unsure how to include all of this in a jsFiddle.</p>
  
  <pre><code>$(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 &gt; 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 &lt; 0) || (ui.value &lt; $("#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 &gt; 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 &lt; 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")  &gt; $("#endTimeSpinner").spinner("value") ) {
                              if ( $("#startTimeSpinner").spinner("value")  &gt; $("#endTimeSpinner").spinner("value") ) {
                                  console.log("start Time spinner &gt; 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 &lt;= end time spinner  -  s = " + $("#startTimeSpinner").spinner("value") + "   e = " + $("#endTimeSpinner").spinner("value") );
  ////                                if ( $("#startTimeSpinner").spinner("value") &lt; 0) {
                                  if ( $("#endTimeSpinner").spinner("value") &gt; 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 &lt; 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 &lt;= end time
                              }// else end time is set
                      }// dates are equal
  //              }
              else {
  //              console.log("End Spinner - Start and End Date DIFFERENT " );
                  if ($(this).spinner("value") &gt; 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") &lt; 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;
                      } 
                  }
          });
  });
  </code></pre>