jquery timepickerで時間のプルダウン

投稿者: | 2020年10月16日

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

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

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

1分ごとに24時間分のプルダウンとする

サンプル

https://blog.tama-tama.net/test/picker/

                <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>

参考

https://www.jonthornton.com/Datepair.js/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA