No.188


【jQuery】DateTimePickerのハマリポイント

DateTimePickerの日付指定での注意事項

 jQueryのplugin、DateTimePicker。日付と時刻指定が一緒にできる便利なプラグインだ。これを愛用している方も多いだろう。

DateTimePicker

 ただ、ちょっとヘルプが分かりづらいのが難点。
 それでも表示に関する内容は公式の記述とかネット情報を見ればまだわかるんだけど、細かいことに関しては情報も少なく、はまってしまうと試行錯誤でとんでもなく時間を取られてしまう。

 かくいう自分も、デフォルトの日付指定がある時(valueに記載がある場合)にパネルの方がその日時になってくれないという問題ではまった。
 二度と同じ間違いをしないように、自戒の意味を込めてメモ。


valueの値とpickerパネルを同期させるには

 答えは単純。
 「valueの日付フォーマットがDateTimePickerのformatプロパティとあっている」
 こと。

 例えば

format: "Y/n/j H:i"

 なら

2017/01/02 03:45

 となる。

 注意しなくてはいけないことは2点ある。

  1. 記号があっていること
  2. 日付や時刻の最小単位があっていること(「時まで」「分まで」など)

 先の例では、下記はいずれもNGとなる。

2017-01-02 03:45
2017/01/02 03:45:00

 ただし、ゼロパディングは違っていても大丈夫だった。

2017/1/2 3:45

 これは正常に表示された。