我如何阻止用户选择开始时间之前的结束时间

我正在使用datetimepicker来设置表单中的值。我一直试图限制用户选择开始时间之前的结束时间。我试图设置mindate，hourmin，一个等于开始日期的新日期，但没有成功。根据我相信，下面的代码应该可以工作，但它不会。我如何阻止用户选择开始时间之前的结束时间

 <script src="../js/jquery-1.9.1.js"></script> 
    <script src="../js/jquery-ui-1.10.3.custom.js"></script> 
    <script src="../js/jquery-ui-timepicker-addon.js"></script> 
    <script src="../js/jquery-ui-sliderAccess.js"></script> 
    <script> 

     $(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 > 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 > 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 > 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 > testEndTime) 
          endTimeTextBox.datetimepicker('setDate', testStartTime); 
         } 
         else 
         { 
          startTimeTextBox.val(dateText); 
         } 
        }, 
        onSelect: function (selectedDateTime){ 
        startTimeTextBox.datetimepicker('option', 'maxDate', endTimeTextBox.datetimepicker('getDate')); 
        } 
       } 
       ); 
      } 
     ); 
    </script>

代码的逻辑似乎是正确的，那么为什么它不工作？我已经想出到目前为止是这样的：

  $(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 > 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 > testEndDate) 
           startDateTextBox.datetimepicker('setDate', testEndDate); 
          } 
          else 
          { 
           startDateTextBox.val(dateText); 
          } 
         }, 
         onSelect: function (selectedDateTime){ 
         startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate')); 
         } 
        } 
       ); 
      } 
     );

在上面的代码中，我已经分开使用的DateTimePicker的jQuery插件的日期和时间字段。我这样做是为了更好地控制输入以及它如何存储在数据库中。我希望这将有助于我的查询，并允许更轻松的搜索和更新功能。这是一个使用jQuery支持用户交互的PHP编写的计划项目的一部分。任何帮助和建议，在这项努力，非常感谢！

来源

2013-06-26 royjm

这个想法是对的，问题是你如何比较你的日期。我曾尝试调用datepicker("getDate")，它返回一个字符串，我认为这是在你的datetimepicker插件相同。

您正在比较的字符串看起来像Wed Jun 12 2013 00:00:00 GMT+0200 (CEST)，这里的相等性仅基于Weekdate的字典顺序。

但是如果你使用的JavaScript方法Date.parse（），您可以轻松地比较那些：

var testStartDate = startDateTextBox.datetimepicker('getDate'); 
var testEndDate = endDateTextBox.datetimepicker('getDate'); 
if (Date.parse(testStartDate) > Date.parse(testEndDate)) 
    endDateTextBox.datetimepicker('setDate', testStartDate);

有了这个要点我有一个玩具网站，你可以试试您的验证，第一次约会已经工作：https://gist.github.com/contradictioned/5871967

来源

2013-06-26 21:45:41 contradictioned

谢谢矛盾。我会在早上第一时间尝试一下。我会让你知道它是怎么回事，我会看看这个网站。 – royjm

再次感谢，但解决方案有点偏离我期待的目标。在您的帮助下，我能够找到更接近的工作解决方案。我会公布我到目前为止的答案。 – royjm

我如何阻止用户选择开始时间之前的结束时间

回答

相关问题