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秒ずつ。300にすると、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 3 Datepicker v4

デザイン的にも色々用意されています。Bootstrapが使えるようだったら、これを利用するのが良いと思います。

あわせて読みたい