2013-06-26 6 views
0

datetimepicker를 사용하여 양식의 값을 설정하고 있습니다. 나는 사용자가 시작 시간 이전의 종료 시간을 선택하지 못하도록 제한하려고 노력 해왔다. 나는 마음가짐, 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> 

코드의 논리가 올바른 것처럼 보이는데 왜 작동하지 않는 것입니까? 내가있는 DateTimePicker의 JQuery와 부가 기능을 사용하여 날짜와 시간 필드를 분리 한 위의 코드에서

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

: 지금까지 함께 와서 무엇 다음이다. 입력에 대해 더 잘 제어하고 데이터베이스에 저장하는 방법을 시도했습니다. 나는 나의 쿼리에 도움이되고 더 쉬운 검색과 업데이트 기능을 허용하기를 바라고있다. 이것은 사용자 상호 작용을위한 jquery 지원을 사용하여 PHP로 작성된 스케줄링 프로젝트의 일부입니다. 이 노력에 대한 도움과 제안은 대단히 감사하겠습니다!

답변

2

아이디어가 옳다는 것은 문제를 어떻게 비교하는지에 있습니다. 난 datepicker("getDate"), 문자열을 반환하는 전화를 시도했다,이 귀하의 datetimepicker 플러그인에 동일하다고 가정합니다.

비교할 문자열은 Wed Jun 12 2013 00:00:00 GMT+0200 (CEST)이며 평등은 Weekdate의 사전 식 순서에 기반합니다. 당신은 자바 스크립트 방법 다음 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

+0

감사합니다 모순. 아침에 먼저 시도해 보겠습니다. 어떻게 진행되는지 알려 드리겠습니다. 사이트를 살펴 보겠습니다. – royjm

+1

다시 모순 된 데 감사 드려요.하지만 해결책은 제가하고 싶은 일에서 조금 벗어났습니다. 도움을 받으면 더 가까운 작업 솔루션을 찾을 수있었습니다. 나는 지금까지 생각해 낸 답을 게시 할 것이다. – royjm

관련 문제