jQuery timepicker의 시간을 동적으로 제한 하시겠습니까?

내 양식에 두 개의 필드가 있습니다. 하나는 jQuery 날짜 선택기를 사용하는 날짜 필드이고 다른 하나는 jQuery 시간 선택기입니다. 이제 문제는, 날짜 필드에서 오늘 날짜를 선택하면 시간 선택 도구가 과거 시간을 표시하지 않아야한다는 것입니다. 예를 들면. 시간이 지금 17:00시라면, 시간 피커는 17:00시 이전에 시간을 선택해서는 안됩니다. 여기에 내 코드,jQuery timepicker의 시간을 동적으로 제한 하시겠습니까?

$(function() { 
    $(".datepicker").datepicker({minDate:'0'}); 
    $('.timepicker').timepicker(); 
}); 

$("#date").click(function(){ 
    if($("#date").val()=='04/17/2012') 
    { 
     updatetimefortoday(); 
    } 
});![enter image description here][1] 

function updatetimefortoday() 
{ 
    $('.timepicker').timepicker({ 
     onHourShow: timepickerRestrictHours 
    }); 

    function timepickerRestrictHours(hour) 
    { 
     if ((hour > 17)) 
     { 
      return true; 
     } 
     return false; 
    } 
}

은 우리가 document.ready의 기능을 updatetimefortoday()를 호출하면 이제 문제는 제대로 timepicker를 보여주고있다. 그러나 코드에 표시된대로 날짜 필드를 클릭하여 작업하면 작동하지 않습니다.

enter image description here

이 예상되는 출력 기간을 선택한 후이다.

출처

2012-04-17 Stranger

jQuery를 공식 시간 선택기를 가지고 있지 않습니다. 어느 쪽을 사용하고 있습니까? –

시간 선택 도구를 사용하고 있습니다. http://fgelinas.com/code/timepicker/ – Stranger

조금 더 작업 한 결과, 가장 좋은 방법은 항상 onHourShow 함수를 호출하고 해당 함수에서 선택한 날짜의 유효성을 검사하는 것입니다. 비활성화 된 시간이 빈 셀 대신 사용자에게 계속 표시되기 때문에 이것이 더 좋습니다. 여기

$('#date').datepicker({ 
    minDate: 0 
}); 
$('#time').timepicker({ 
    onHourShow: function(hour) { 
     var now = new Date(); 
     // compare selected date with today 
     if ($('#date').val() == $.datepicker.formatDate ('mm/dd/yy', now)) { 
      if (hour <= now.getHours()) { 
       return false; 
      } 
     } 
     return true; 
    } 
});

가 작동 예입니다 Aymad Safadi에 의해보고 시작과 끝 시간 문제로 http://jsfiddle.net/fgelinas/kUFgT/4/

, 내가 무엇을 할 수 있는지 볼 것이다, 이것은 확실히 버그입니다.

출처

2012-04-18 23:11:11

위 답변 전문가. 그것은 내 문제를 해결했다. 고맙습니다. – Stranger

timepicker는 문서 준비 기능에서 입력에 이미 연결되어 있습니다. 내가 대신 onHourShow 특성이 방식을 바꿀 수 있다고 생각 : (그 일의 표준 jQuery를 UI 방식이다)

$('.timepicker').timepicker('option', 'onHourShow', timepickerRestrictHours);

출처

2012-04-17 12:49:16

안녕하세요 Francois Gelinas, 답변 해 주셔서 감사합니다. 작동하지 않습니다. 어떻게 나타나야하는지 스크린 샷을 업로드했습니다. – Stranger

해보십시오 @FrancoisGelinas '접근 방식 만 라이브러리의 옵션을 사용합니다. 이 경우 : "시간". 같은

뭔가 : 여기

$('.datepicker').datepicker({ 
    minDate:'0', 
    onSelect: function() 
    { 

     if($("#date").val()=='04/18/2012') 
     { 
      $('.timepicker').timepicker('option', 'hours', {starts: 05, ends: 23}); 
     } 
     else 
     { 
      $('.timepicker').timepicker('option', 'hours', {starts: 0, ends: 23}); 
     } 
    } 
}); 
$('.timepicker').timepicker();

데모 : 말했다 http://jsfiddle.net/JbjLg/

는 timepicker 라이브러리 자체에 버그가있는 것 같습니다. "시작"시간을 11보다 길게 선택하면 모든 시간이 사라집니다. 나는 을 강력히 검토하고 이메일을 통해 또는 그의 GitHub 사이트에서 문제에 관해 저자에게 알리라고 제안합니다.

출처

2012-04-18 13:31:28

<script> 
     $(function() { 
     $(".datepicker").datepicker({ 
      changeMonth: true, 
      changeYear: true, 
      minDate: 0 
     }); 
     }); 

     $(function() { 
     $(".timepicker").timepicker({ 
      minTime: { hour: new Date().getHours(), minute: new Date().getMinutes() }, 
     }); 
     }); 

    </script>

망가이 잊지 : 당신이 하나를 사용할 수 있습니다

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
    <script src="https://raw.githubusercontent.com/fgelinas/timepicker/master/jquery.ui.timepicker.js"></script>

출처

2016-08-02 09:02:46

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <link rel="stylesheet" href="styles/kendo.common.min.css" /> 
 
    <link rel="stylesheet" href="styles/kendo.default.min.css" /> 
 
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /> 
 

 
    <script src="js/jquery.min.js"></script> 
 
    <script src="js/kendo.all.min.js"></script> 
 
</head> 
 
<body> 
 

 
     <div id="example"> 
 
      <div class="demo-section k-content"> 
 

 
       <h4>Start time</h4> 
 
       <input id="start" value="8:00 AM" style="width: 100%;" /> 
 

 
       <h4 style="margin-top: 2em;">End time</h4> 
 
       <input id="end" value="8:30 AM" style="width: 100%;" /> 
 

 
      </div> 
 
      <script> 
 
       $(document).ready(function() { 
 
        function startChange() { 
 
         var startTime = start.value(); 
 

 
         if (startTime) { 
 
          startTime = new Date(startTime); 
 

 
          end.max(startTime); 
 

 
          startTime.setMinutes(startTime.getMinutes() + this.options.interval); 
 

 
          end.min(startTime); 
 
          end.value(startTime); 
 
         } 
 
        } 
 

 
        //init start timepicker 
 
        var start = $("#start").kendoTimePicker({ 
 
         change: startChange 
 
        }).data("kendoTimePicker"); 
 

 
        //init end timepicker 
 
        var end = $("#end").kendoTimePicker().data("kendoTimePicker"); 
 

 
        //define min/max range 
 
        start.min("8:00 AM"); 
 
        start.max("6:00 PM"); 
 

 
        //define min/max range 
 
        end.min("8:00 AM"); 
 
        end.max("7:30 AM"); 
 
       }); 
 
      </script> 
 

 
      <style> 
 

 
      </style> 
 
     </div> 
 

 
</body> 
 
</html>

출처

2016-08-10 16:26:07 KamleshNishad

jQuery timepicker의 시간을 동적으로 제한 하시겠습니까?

답변

관련 문제