HTML フォームで 日付や時間を入力できるinput要素は datetime-local を使う
HTML5でフォームを作ると、inputに使える要素がとても多いので良いのだが、日付などを入力できる「datetime」とやらに悩まされたことがあったので、備忘録。
目次
datetime の何に悩まされたのか
まだ、html初心者の時代、日時入力項目を、カレンダーみたいなもの（date picker）を表示し、選択できるようにしたいと思っていたら、html5には、「datetime」ってのがあるのを知って、使ってみたんですね。
<input type="datetime">
てな感じで。
でもですね、カレンダー全然表示されないんです。
色々調べてみたら、Chrome、Firefox、IEとかでは使えないと。それはダメです。
datetime-localを使う
基本的な使い方
で、調査を進めてみると、「datetime-local」を使えば良いというのがわかりました。
<input type="datetime-local">
こんな感じ。
これで、カレンダーから日付を選択して時刻を設定すると、「YYYY-MM-DDThh:mm:s」形式で値が入ってきます。
面倒なのは、真ん中にある「T」ってやつ。これ邪魔です。タイムゾーンの略なんでしょう。
DBに入れた値を表示するときに、「T」が邪魔。
なので、表示するときにいちいちphpとかでtrimしたりしているのだけど、他にも良い方法があるのかも。
オプションの属性もいくつか用意されています。
min属性とmax属性
<input type="datetime-local" name="example" min="2017-04-01T00:00" max="2017-12-31T23:59">
選択できる日付の範囲を指定できます。
step属性
<input type="datetime-local" name="example" step="300">
デフォルトは60秒ずつ。３００にすると、5分刻みの設定になります。
その他、日付や時刻入力用のinput type
「datetime-local」以外にもhtml5には便利な日付や時間系のinput typeがあるので、紹介します。
日付のみ選択
<input type="date">
年月のみ選択
<input type="month">
週で選択
<input type="week">
その年の何週目か、っていう選択。
時刻のみ選択
<input type="time">
時刻のみ選択
<input type="time">
Bootstrap のDatepickerが便利
ここ最近、フォーム系のページはほとんどBootstrapでデザインしてしまいますが、プラグインに、Datepickerというものがあります。
デザイン的にも色々用意されています。Bootstrapが使えるようだったら、これを利用するのが良いと思います。
