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

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

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

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

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

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

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

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

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

"2020-05-15"

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

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

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

"2020-07"

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

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

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

"2020-W20"

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

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

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

"00:00"

<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でも確認しましたがやっぱり取れない仕様みたいです。

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

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

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