<input> 要素の時間形式 (12 時間または 24 時間) を調整するにはどうすればよいですか?

Question

type=time の HTML5 入力要素を使用しています。問題は、時刻が 12 時間形式 で表示されることですが、24 時間形式 で表示したいと考えています。 24 時間制に設定するにはどうすればよいですか?

これは私の入力フィールドです:

< /pre>

Answer 1

HTML5 ドラフトによると、input type=time は時刻を入力するためのコントロールを作成し、「ユーザーの好みの表示方法」を使用して実装されることが期待されています。しかし実際には、これはブラウザのローカリゼーション ルールに従うウィジェットを使用することを意味します。したがって、周囲のコンテンツの言語に関係なく、表示はブラウザの言語、基礎となるオペレーティング システムの言語、またはシステム全体のロケール (ブラウザに応じて) に基づいて変更されます。たとえば、フィンランド版の Chrome を使用すると、表示されるウィジェットは標準の 24 時間時計を使用します。状況は異なる場合があります。

したがって、input type=time は、ローカリゼーションの概念をページ作成者の外部に完全に残すアプローチに基づいています。これは意図的なものであり、この質問は HTML5 の議論で数回提起されていますが、変更はありません (予想どおり、この動作を説明するテキストの明確化を除いて)。

input type=time では、pattern 属性と placeholder 属性は使用できないことに注意してください。また、placeholder="hrs:mins" が実装されている場合、誤解を招く可能性があります。ブラウザのロケールで時刻区切り文字として「.」が使用されている場合、ユーザーは 12:30 の代わりに 12.30 (ピリオドを使用) を入力する必要がある場合があります。

私の結論は、pattern 属性をサポートしていないブラウザでは、input type=text を使用し、JavaScript を使用して入力の正確さをチェックする必要があるということです。

Answer 2

HTML5時間入力

これは日付/時刻関連のタイプの中で最も単純であり、ユーザーは通常、ユーザーのオペレーティング システムのロケールに応じて 24/12 時間時計で時刻を選択できます。返される値は 24 時間の 時:分 形式で、14:30 のように見えます。

各ブラウザでの表示方法などの詳細については、MDN をご覧ください。

リーリー