jquery timepickerで時間のプルダウン

jquery

2020.10.17 2020.10.16

よく使うdatetimepickerで連動するプルダウン。datepair.jsを使う

サンプル見てもらったら早い

    <script src="./datepair.js"></script>
    <script src="./jquery.datepair.js"></script>

１分ごとに２４時間分のプルダウンとする

サンプル

Datepair.js – Demos and Documentation

                <div class="demo">
                     <h2>Default Delta Example</h2>

                     <p>Datepair can automatically set the other input when a first value is selected.</p>

                     <p id="defaultDeltaExample">

                         <input type="text" class="time start" /> to
                         <input type="text" class="time end" />

                     </p>
                 </div>

                 <script>
                     $('#defaultDeltaExample .time').timepicker({
                         'showDuration': false,
           							'step': 1,
                         'timeFormat': 'H:i'
                     });
/*
                     $('#defaultDeltaExample .date').datepicker({//カレンダー
                         'format': 'm/d/yyyy',
                         'autoclose': true
                     });
*/
                     var defaultDeltaExampleEl = document.getElementById('defaultDeltaExample');
                     var defaultDeltaDatepair = new Datepair(defaultDeltaExampleEl, {
                         'defaultDateDelta': 1,
                         'defaultTimeDelta': 7200000//2時間
                     });
                 </script>

参考