85

HTML5入力要素をtype=time. 問題は時間12 hoursが表示されることですが、1日で表示したいです24 hours。どうすれば24時間にできますか？

ここに私の入力フィールドがあります：

<input type="time" name="time" placeholder="hrs:mins" pattern="^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$" class="inputs time" required>

4

11 に答える 11

69

HTML5 時刻入力

これは日付/時刻関連のタイプの中で最も単純なもので、通常はユーザーの OS ロケール構成に応じて、ユーザーが 24/12 時間制で時刻を選択できるようにします。返される値は 24 時間hours:minutes形式で、次のようになります14:30。

各ブラウザの外観を含む詳細については、MDNを参照してください。

<input type="time" name="time">

于 2012-11-23T04:54:33.283 に答える
29

HTML5 ドラフトにより、input type=time「ユーザーの好みのプレゼンテーション」を使用して実装されることが期待される、時刻入力のコントロールを作成します。しかし、これは実際には、時間表示がブラウザのロケールの規則に従うウィジェットを使用することを意味します。そのため、周囲のコンテンツの言語とは関係なく、表示はブラウザーの言語、基盤となるオペレーティング システムの言語、またはシステム全体のロケール設定 (ブラウザーによって異なります) によって異なります。たとえば、フィンランド語版の Chrome を使用すると、ウィジェットは標準の 24 時間制を使用しているように見えます。あなたの走行距離は異なります。

このようにinput type=time、ページ作成者の手からすべてを奪うローカリゼーションのアイデアに基づいています。これは意図的なものです。この問題は HTML5 の議論で何度か取り上げられましたが、結果は同じでした: 変更はありません。(テキストに説明を追加する可能性があることを除いて、この動作は意図したとおりに記述されます。)

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

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

于 2012-11-23T08:11:32.290 に答える
12

ロケールのシステム時間設定によって異なります。24 時間にすると、24 時間の時間が表示されます。

于 2014-05-14T04:16:01.990 に答える
11

It depends on the time format of the user's operating system when the web browser was launched.

So:

  • If your computer's system prefs are set to use a 24-hour clock, the browser will render the <input type="time"> element as --:-- (time range: 00:00–23:59).
  • If you change your computer's syst prefs to use 12-hour, the output won't change until you quit and relaunch the browser. Then it will change to --:-- -- (time range: 12:00 AM – 11:59 PM).

And (as of this writing), browser support is only about 75% (caniuse). Yay: Edge, Chrome, Opera, Android. Boo: IE, Firefox, Safari).

于 2016-09-14T01:01:12.280 に答える
5

小さなコンポーネントを使用できる/使用する意思がある場合は、この Timepicker — https://github.com/jonataswalker/timepicker.js — を自分のニーズに合わせて作成しました。

使い方はこんな感じです。

var timepicker = new TimePicker('time', {
  lang: 'en',
  theme: 'dark'
});

var input = document.getElementById('time');

timepicker.on('change', function(evt) {
  
  var value = (evt.hour || '00') + ':' + (evt.minute || '00');
  evt.element.value = value;

});
body {
  font: 1.2em/1.3 sans-serif;
  color: #222;
  font-weight: 400;
  padding: 5px;
  margin: 0;
  background: linear-gradient(#efefef, #999) fixed;
}
input {
  padding: 5px 0;
  font-size: 1.5em;
  font-family: inherit;
  width: 100px;
}
<script src="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<link href="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/>

<div>
  <input type="text" id="time" placeholder="Time">
</div>

于 2016-04-21T02:25:45.000 に答える
1

HTML 提供のみinput type="time"ブートストラップを使用している場合は、timepicker を使用できます。この URL http://jdewit.github.io/bootstrap-timepickerからコードを取得でき ます。

于 2015-07-16T14:24:03.007 に答える
1

このタイプのサポートはまだ非常に貧弱です。Opera はあなたが望む方法でそれを示します。Chrome 23 では、秒と AM/PM で表示されます。24 バージョン (現時点では開発ブランチ) では、(可能であれば) 秒は削除されますが、AM/PM に関する情報は表示されません。
おそらく望んでいるわけではありませんが、現時点では、タイムピッカー形式を実現するための唯一のオプションは、javascript を使用することです。

于 2012-11-23T05:02:50.240 に答える
0

時刻は HH:MM AM/PM 形式で表示されますが、バックエンドでは 24 時間形式で機能します。基本的な JavaScript を使用して確認できます。

于 2014-06-04T21:12:25.543 に答える