HTML5 のinput-type="datetime-local"で秒を扱う時は色々注意

ちょっと嵌ったので備忘も兼ねて

TL;DR;

• HTML5で日付時刻の推奨input-typeはdatetime-local
• datetime-localはデフォルトでは分刻みで秒は扱えない
• 秒まで扱いたい場合はstepをセットする
• ただし、ブラウザ間で差異がありすぎるのであまり信用してはいけない

内容

MDNの記述を見る限り、
HTML5での日付時刻を入力させたい場合は、input-type="datetime-local"が推奨値のようです。
(ただし、PC版FireFoxとSafariが未対応なのでそこは注意。モバイル版は大丈夫
また、古いinputype="datetime"は使ってはいけないとのこと。)
ただ、このdatetime-local、デフォルトでは秒入力に対応していません。

秒を利用したい場合、step属性に何秒刻みで入力するかを指定する必要があります。

ただ、この部分の挙動はブラウザ間でかなり異なるのであまり信用出来なさそうです。

すぐ私の手元で試すことの出来た3ブラウザだけでも以下のような差異がありました。

	Chrome(PC)	Chrome(android)	Edge
stepなし(valueで秒まで含む値指定)	秒は表示されるが入力できない	秒は表示されない	秒が表示され入力できる
valueなし stepなし	秒は表示されない	秒は表示されない	秒は表示されない
valueなし stepあり(1)	秒が表示され入力できる(1刻み)	秒は表示されない	秒が表示され入力できる(1刻み)
valueなし stepあり(60の倍数)	秒は表示されない	秒は表示されない	秒は表示されない
valueなし stepあり(60を超える60の倍数ではない値)	秒が表示され入力できる(1刻み)	秒は表示されない	秒が表示され入力できる(1刻み)
valueなし stepあり(2)	秒が表示され入力できる(2刻み)	秒は表示されない	秒が表示され入力できる(1刻み)

正直、差がありすぎて全然信用ならないですね。
複数ブラウザ対応しなければいけないアプリの場合、秒入力は別に手動で欄を設けた方が無難かも知れません。