jQueryタイムピッカーの時間を動的に制限しますか？

私のフォームには2つのフィールドがあります。 1つはjQuery日付ピッカーを使用している日付フィールドともう1つはjQuery時間ピッカーです。今問題は、私は日付フィールドで今日の日付を選択すると、時間ピッカーは過去の時間を表示すべきではありません。たとえば。現在の時刻が17:00時であれば、時刻選択器は17時前の時刻を選択可能として表示すべきではない。ここに私のコードは、ある我々はdocument.readyに機能updatetimefortoday()を呼び出す場合jQueryタイムピッカーの時間を動的に制限しますか？

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

は、今の問題は、それが正しく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').timepicker('option', 'onHourShow', timepickerRestrictHours);

出典

2012-04-17 12:49:16

こんにちはFrancois Gelinas、ありがとうございます。答えはありますが、動作していません。どのように表示されるべきかのスクリーンショットをアップロードしました。 – Stranger

をのみ、ライブラリのオプションを使用して、（それを行うための標準のjQuery UIの道である）@FrancoisGelinas'アプローチを試してみてください：私はあなたがこの方法の代わりにonHourShowプロパティを変更することができると思います。この場合：「時間」。ここ

$('.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タイムピッカーの時間を動的に制限しますか？

答えて

関連する問題