一筋縄ではいかない時刻入力

  • 投稿日:
  • by
  • カテゴリ:
  • ハッシュタグ:

Datepicker は比較的単純なんで、汎用的なプラグインでOKなんですが、時刻や時間帯をスライダで入力するのは、使用状況による変化が大きいので難しいですね。

前回の記事で「決定版か?」と思った jQuery UI selectToUISlider plugin ですが、これだと select要素の中にあらかじめ選択肢を仕込んでおく必要があります。 (ある範囲内で)自由に時刻を指定するには不便ですね。

というか、元々 jQuery UI Slider は設定範囲内から自由に選択できるものであって、それをselect要素から選べるようにしたのが selectToUISlider plugin なんですよね。
だったら jQuery UI Slider をそのまま使えばいいだけの話です。

ただ、時刻をスライダで扱うにはどうしたらいいのか? ググってみたら、「青色立方体研究所」さんに事例がありました。 Google code の date.js を使うんですね。 たいへん参考になりました。
他には数値として Unixタイムスタンプ で取り扱ってもいいかもしれません。

あと、text属性の input要素にスライダの値を入力するんですが、逆に input要素に入力した数値をスライダに反映させる機能も追加しました。