[html5]日付・時刻入力タグ6個を再確認

inputタグのtypeでdatetime-localを使っているコードを触ったんですが、時分が入ってないと値が取れないんですね・・・😫
復習をかねて、html5で追加された日付・時刻関連のinputタグについて書いています。

2020/05/17時点のchromeで確認してます。
※閲覧ブラウザによっては表示されないタグがあると思います。

PR

html5で登場した日付・時刻入力タグ

html5から登場した日付・時刻入力タグを下記に記載しています。
今現在、ブラウザによっては表示されたりされなかったりするようです。

プロジェクトでブラウザが指定されている場合は有効に使えそうです。

date

書き方

<input type="date" name="user_date" id="user_date" />

説明・サンプル

typeにdateを指定すると、下記のように日付指定できるエリアが表示されます。
右側の▼をクリックするとカレンダーが表示されます。

javascriptで値を取得した結果はこうなっています。(2020-05-15を指定)

"2020-05-15"

month

書き方

<input type="month" name="user_month" id="user_month" />

説明・サンプル

typeにmonthを指定すると、下記のように月を指定できるエリアが表示されます。
chromeではdateと同じカレンダーで日付を指定すると月が選ばれるようになっています。

javascriptで値を取得した結果はこうなっています。(2020/07を選択)

"2020-07"

week

書き方

<input type="week" name="user_week" id="user_week" />

説明・サンプル

typeにweekを指定すると、下記のように週を指定できるエリアが表示されます。
chromeではdateと同じカレンダーで日付を指定すると「XXXX年第XX週」という表示になります。

javascriptで値を取得した結果はこうなっています。(2020-05-17を選択)

"2020-W20"

time

書き方

<input type="time" name="user_time" id="user_time" />

説明・サンプル

typeにtimeを指定すると、下記のように時刻を指定できるエリアが表示されます。

javascriptで値を取得した結果はこうなっています。(0時0分を入力)

"00:00"

datetime-local

書き方

<input type="datetime-local" name="user_datetime_local" id="user_datetime_local" />

説明・サンプル

typeにdatetime-localを指定すると、下記のように日付と時刻を指定できるエリアが表示されます。

javascriptで値を取得した結果はこうなっています。(2020-05-12の12時00分を入力)

"2020-05-12T12:00"

(注)日付指定のみだと値が取れない

nuxtで使ったのですが、日付指定だと値が取れず。(chormeで確認)
javascriptでも確認しましたがやっぱり取れない仕様みたいです。

時分まで入力しないと値が取得できないようになっていますね。。

datetime

書き方

<input type="datetime" name="user_datetime" id="user_datetime" />

説明・サンプル

typeをdatetimeで指定すると、UTC(協定世界時)による日時設置ができるみたいですが、chromeではカレンダー出てこず…
chromeでみると下記はテキストエリアのようになってます。

コメント

タイトルとURLをコピーしました