jQueryのdatetimepickerで選択可能な時刻をカスタマイズする方法【allowTimes】

jQueryのdatetimepickerで選択可能な時刻をカスタマイズする方法【allowTimes】

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • jQueryのdatetimepickerプラグインのオプションを設定したい
  • オプションで選択可能な時刻を任意の時刻だけにしたい
  • 選択可能な時刻を12時と14時、18時といった感じで制限する方法が知りたい

という方のお悩みを解決します!

この記事で紹介する「allowTimesパラメータを使用する方法」を実践すれば、数行のコードで選択可能な時刻を指定することができるようになります!

それではやり方を見ていきましょう〜

allowTimesパラメータで解決

以下のように、allowTimesパラメータに表示させたい時刻をオブジェクト形式で渡してあげればOKです!

下のコードは、「14時/15時/17時/19時」のみ選択可能にさせたい場合の記述となります。

datetimepickerオプション設定
$(function(){
  $('#datetimepicker').datetimepicker({
    allowTimes:[
      '14:00', '15:00', '17:00', '19:00'
    ]
  });
});

参考

参考 datetimepickerDateTimePicker公式

まとめ

選択してほしい時間帯が予め決まっているイベントなどでの使用で活躍しそうなオプションでした!

datetimepicker関連のTipsを他にも興味ある方は以下の記事をチェックしてみてください〜!

スマホでinput要素のフォーカス時にキーボードを表示させない方法【readonly属性】スマホでinput要素のフォーカス時にキーボードを表示させない方法【readonly属性】 jquery.datetimepicker.jsで「formatDate of null」というエラーが出た時の対処法【’formatDate’ of null】jquery.datetimepicker.js使用時の注意点

コメントを残す

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