投票期間の管理画面を作っていて、日付の入力を[yyyy-mm-dd HH:MM:ss]という一箇所のテキストボックスにしていたんだけれど、入力制限とかカレンダーで選べるようにするとかしたいとずっと思いながらしていなかった。

Javascriptを導入しなくてはいけないという点で躊躇していたので、HTML5がこれらの入力をサポートしているという記事を読んで、導入を決意。

参考にしたのは下記のページ

HTML5でinput要素に追加された新しいタイプ13連発

★HTML5タグリファレンス

■初期状態

          $setting  = '<input type="text" name="'.$key.'" value="'.$value.'" />';

※$valueにはPostgresqlの「timestamp with time zone型」が入っています。「2012-11-06 19:00:01+09」こんな感じ

■入力箇所を二箇所にして、データベースに入っている値を分割表示

          $setting  = '<input type="date" name="'.$key.'_date" value="'.substr($value,0,-12).'" />';
          $setting .= '<input type="time" name="'.$key.'_time" value="'.substr($value,11,-3).'" />';

こんな風に書くと困ったことが。1つは”time”のところで、値が初期化されたように「00:00:00」と表示されちゃうこと。これは、substrの指定を間違えていて、半角スペースが値に入ってしまい、データとして無効と判定されてしまったと判明。
「 19:00:01」←　これだと00:00:00 になる。

もう一つは、秒の部分がクリックできなくて、POSTした後の値もこんな形になってた。

["start_date_time"]=> string(5) "19:00"

そこで調べるとstep という1つのクリックあたりの単位を設定する部分があるらしく、それを1にしたら問題なく秒単位の設定もできるようになっていた。

■解決後のinput type”time”

          $setting .= '<input type="time" step="1" value="'.substr($value,11,-3).'" name="'.$key.'_time" >';

ちなみに、対応していないブラウザでみるとただのテキストボックスなので、これはこの状態が以前と同じで嬉しいのかも。