18

Chromeの最後のアップデート（私の場合は「23.0.1271.64m」）では、input = timeには、非アクティブでクリックできない秒が含まれているようです。これは私たちのサイトでは見栄えが良くないので、誰かが秒を削除する方法を見つけたかどうか知りたいです。残念ながら、jsfiddleがダウンしていて、そこに例を投稿することはできませんが、とにかく人々が読むことができるように、ここに投稿します。

<html>
<head></head>
<body>
    <input type="time" value="00:44" name="tiiiiden"/>
</body>
</html>

秒は「そこにある」だけで編集できないため、これはバグである可能性があり、すぐに修正される予定です。

4

8 に答える 8

22

これは非常に古い質問ですが、解決策を見つけました。

ステップを60に変更する必要があります。ステップをデフォルト（1）のままにすると、1秒増加する必要があるため、フィールドに秒が表示される必要があります。

ステップを60に設定すると、一度に1分ずつ増加するため、秒を表示する必要はありません。

于 2015-03-09T12:02:06.667 に答える
5

@hendのstep60に設定するソリューションは空の入力で機能しますが、値が事前に入力された状態でフォームをロードすると、無効な状態で秒が再表示される場合があります。

ここに画像の説明を入力してください

次のCSSを使用して、それらとぶら下がっているコロンをマスクできます。

  ::-webkit-datetime-edit-second-field {
    background: $color-white;
    color: transparent;
    margin-left: -3px;
    position: absolute;
    width: 1px;
  }

これにより、次のようになります。

ここに画像の説明を入力してください

于 2017-02-08T18:12:22.617 に答える
4

23.0.1271.64 mタイプの変更に関連する変更/リリースノートは見つかりませんでしたが、W3CによるHTML5マークアップドキュメントform inputの最新の作業ドラフトによると、要素は「定義された有効な部分時間」以外の時間形式をサポートしていませんRFC 3339 "で、それはとです。input type="time"hh:mm:ss.ffhh:mm:ss

input 日付/時刻要素のいずれにも独自の日付/時刻形式を指定する属性がないため、定義された形式に固執します。

入力タイプ=時間から–時間入力制御

値： [RFC3339]で定義されている有効な部分時間。
例：
23：20：
50.52 17:39:57

RFC3339から

time-secfrac="。" 1*DIGIT
部分時間=time-hour"：" time-minute "：" time-second [time-secfrac]

最後に、Chrome 23.0.1271.64 m（私のマシンで）さまざまな時間形式をレンダリングする方法のスクリーンショットを含めています。

<input type="time" value="23:20:50.52" />
<input type="time" value="17:39:57" />
<input type="time" value="13:37" />
<input type="time" value="" />

ここに画像の説明を入力してください

マークアップはjsFiddleでも入手できます。

于 2012-11-08T20:27:05.807 に答える
4

OSXおよびLinuxで安定しているChrome23は、不要な場合は秒のフィールドを省略し、WindowsのChrome24ベータ版も省略しています。Chrome24の安定版リリースを待つことをお勧めします。

于 2012-11-09T06:20:45.507 に答える
2

同じ問題を抱えています。white-space: nowrap秒を非表示にするためにとで固定幅を使用しましたoverflow: hiddenが、入力がフォーカスされている場合、問題は残ります。

于 2012-11-08T13:45:58.757 に答える
2

同じ問題が発生しました。事前に入力された日付を使用して入力を入力する場合は、次を使用してください。

var myDate = new Date();
myDate.setSeconds(0);
myDate.setMilliseconds(0);

次のような入力タグを使用します。

<input type="datetime-local" step="60"/>

私は個人的にAngularを使用していますが、DateはJavascriptなので、何でも機能するはずです。

于 2017-08-14T10:26:58.033 に答える
1

Android ChromeとWebbrowserにはまだその問題があるため、angularjsを使用してスマートフォン固有の回避策を作成しました。

http://jsfiddle.net/Rvjuf/12/

使い方：

これを処理する2つの要素があります。

<span>{{ timeDisplay }}</span>
<input type="time" ng-model="time">

リンクコードで、要素のスタイルを設定し（CSSファイルでも同様に実行できます）、スパンのクリックにバインドします。

        scope.inputElement.css({
            position: "absolute",
            "z-index": "-10000",
            opacity: 0
        });
        scope.displayElement.css({
            width: "200px",
            height: "20px",
            background: "blue",
            color: "white",
        });
        scope.displayElement.bind("click", function(event) {
            scope.inputElement[0].focus();
            scope.inputElement[0].click();
        });

次に、時間値の変更リスナーを登録し、timeDisplay変数を更新します。

        $scope.$watch('time', function(nv, ov) {
            var parts = nv.split(" ")[0].split(":");
            var hours = parts[0];
            var minutes = parts[1];
            $scope.timeDisplay = $filter('date')(new Date(2014, 03, 06, hours, minutes, 0), "H:mm");
        });

そのため、ユーザーがスパンをタップすると、入力がフォーカスされるかクリックされ（iOSとANDROIDによって違いが生じます）、ネイティブのタイムピッカーUIが表示されます。

于 2014-03-06T14:35:36.133 に答える
0

これを修正するためにmoment.jsを使用しています。次のようにコントローラを設定することにより、事前入力された入力時間でミリスを回避するために秒を切り捨てることができます。

const localDate = moment(data.date).startOf('minute').toDate();

お役に立てば幸いです;）

于 2017-05-16T13:51:05.127 に答える