我如何阻止用戶選擇開始時間之前的結束時間

我正在使用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

我如何阻止用戶選擇開始時間之前的結束時間

回答

相關問題