title: How can I stop users from picking an end time that is before the start time
body: <p>I am using datetimepicker to set values in a form. I have been trying to limit the user from picking an end time that is before the start time. I have tried setting the mindate, hourmin, a new date that is equal to start date, without success. According to what I believe, the following code should work, but it does not.</p>
  
  <pre><code>        &lt;script src="../js/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="../js/jquery-ui-1.10.3.custom.js"&gt;&lt;/script&gt;
      &lt;script src="../js/jquery-ui-timepicker-addon.js"&gt;&lt;/script&gt;
      &lt;script src="../js/jquery-ui-sliderAccess.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  
          $(function() 
              {
  
                  var startDateTextBox = $('#startDate');
                  var endDateTextBox = $('#endDate');
                  var startTimeTextBox = $('#startTime');
                  var endTimeTextBox = $('#endTime');
                  startDateTextBox.datepicker(
                      {
                          minDate: ("setDate", '',new Date()),
                          hourGrid: 12,
                          minuteGrid: 15,
                          stepMinute: 15,
  
                          onClose: function(dateText, inst) {
                          if (endDateTextBox.val() != '') 
                          {
  
                              var testStartDate = startDateTextBox.datetimepicker('getDate');
                              var testEndDate = endDateTextBox.datetimepicker('getDate');
                              if (testStartDate &gt; testEndDate)
                              endDateTextBox.datetimepicker('setDate', testStartDate);
  
                          }
                          else 
                          {
                              endDateTextBox.val(dateText);
                          }
                          },
                          onSelect: function (selectedDateTime){
                          endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
                          }
                      }
                  );
                  startTimeTextBox.datetimepicker(
                  {
                      timeOnly:true,
                      minuteGrid: 15,
                      stepMinute: 15,
                      minDate: ("setTime", '',new Date()),
                      timeFormat: 'hh:mm tt',
                      onClose: function(dateText, inst)
                      {
                          if (endTimeTextBox.val() != '') 
                          {
                          var testStartTime = startTimeTextBox.datetimepicker('getDate');
                          var testEndTime = endTimeTextBox.datetimepicker('getDate');
                          if(testStartTime &gt; testEndTime)
                          endTimeTextBox.timepicker('setTime', testStartTime);
                          }
                          else
                          {
                              endTimeTextBox.val(dateText)
                          }
                      },
                      onSelect: function (selectedDateTime){
                      endTimeTextBox.datetimepicker('setDate', startTimeTextBox.datetimepicker('getDate') );
                      }
                  }
                  );
                  endDateTextBox.datepicker(
                      {
                          hourGrid: 12,
                          minuteGrid: 15,
                          stepMinute: 15,
  
                          onClose: function(dateText, inst) 
                          {
                              if (startDateTextBox.val() != '') 
                              {
                                  var testStartDate = startDateTextBox.datetimepicker('getDate');
                                  var testEndDate = endDateTextBox.datetimepicker('getDate');
                                  if (testStartDate &gt; testEndDate)
                                  startDateTextBox.datetimepicker('setDate', testEndDate);
                              }
                              else 
                              {
                                  startDateTextBox.val(dateText);
                              }
                          },
                          onSelect: function (selectedDateTime){
                          startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
                          }
                      }
                  );
                  endTimeTextBox.datetimepicker(
                  {
                      timeOnly:true,
                      minuteGrid: 15,
                      stepMinute: 15,
                      timeFormat: 'hh:mm tt',
  
                      onClose: function(dateText, inst) 
                      {
                          if (startTimeTextBox.val() != '') 
                          {
                              var testStartTime = startTimeTextBox.datetimepicker('getDate');
                              var testEndTime = endTimeTextBox.datetimepicker('getDate');
                              if (testStartTime &gt; testEndTime)
                              endTimeTextBox.datetimepicker('setDate', testStartTime);
                          }
                          else 
                          {
                              startTimeTextBox.val(dateText);
                          }
                      },
                      onSelect: function (selectedDateTime){
                      startTimeTextBox.datetimepicker('option', 'maxDate', endTimeTextBox.datetimepicker('getDate') );
                      }
                  }
                  );
              }
          );
      &lt;/script&gt;
  </code></pre>
  
  <p>The logic of the code seems right, so why is it not working?
  What I have come up with so far is the following:</p>
  
  <pre><code>            $(function() 
          {
              var startDateTextBox = $('#startDate');
              var endDateTextBox = $('#endDate');
              startDateTextBox.datetimepicker(
                  {
                      altField:"#startTimeALT",
                      altFieldTimeOnly: true,
                      timeFormat: "h:mm tt",
                      minDate: ("setDate", '',new Date()),
                      hourGrid: 12,
                      minuteGrid: 15,
                      stepMinute: 15,
  
                      onClose: function(dateText, inst) 
                      {
                          if (endDateTextBox.val() != '') 
                          {
                              var testStartDate = startDateTextBox.datetimepicker('getDate');
                              var testEndDate = endDateTextBox.datetimepicker('getDate');
                              if (testStartDate &gt; testEndDate)
                              endDateTextBox.datetimepicker('setDate', testStartDate);
                          }
                          else 
                          {
                              endDateTextBox.val(dateText);
                          }
                          },
                          onSelect: function (selectedDateTime){
                          endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
                      }
                  }
                  );
                  endDateTextBox.datetimepicker(
                      {
                          minDate: ("setDate", '',new Date()),
                          altField:"#endTimeALT",
                          altFieldTimeOnly: true,
                          timeFormat: "h:mm tt",
                          hourGrid: 12,
                          minuteGrid: 15,
                          stepMinute: 15,
  
                          onClose: function(dateText, inst) 
                          {
                              if (startDateTextBox.val() != '') 
                              {
                                  var testStartDate = startDateTextBox.datetimepicker('getDate');
                                  var testEndDate = endDateTextBox.datetimepicker('getDate');
                                  if (testStartDate &gt; testEndDate)
                                  startDateTextBox.datetimepicker('setDate', testEndDate);
                              }
                              else 
                              {
                                  startDateTextBox.val(dateText);
                              }
                          },
                          onSelect: function (selectedDateTime){
                          startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
                          }
                      }
                  );
              }
          );
  </code></pre>
  
  <p>In the above code I have separated the date and time fields using the datetimepicker jquery addon. I did this in an attempt to gain better control over the input and how it is stored in the database. I am hoping the will help with my queries and allow easier search and update functions. This is part of a scheduling project written in php with jquery support for user interaction. Any help and suggestions in this endeavor are greatly appreciated! </p>