70689


以下の HTML を Chrome で表示すると時間入力とポップアップするカレンダーのような入力が出ます

[code]

    <input type="datetime-local" step=600>
    
[/code]

ボックスからの入力の方はどうやっても step 以外入力できないのですが  
カレンダー入力からは任意の分が入力できてしまい非常に使いにくいUIになってしまいます

[![画像の説明をここに入力](https://i.stack.imgur.com/hf0bQm.png)](https://i.stack.imgur.com/hf0bQm.png)

理想はここの分のスクロール選択肢が 10 分刻みになることなんですが  
それは難しいと思うのでこのカレンダー入力自体を消してしまいたいのですが可能でしょうか

他にもユーザに誤解を招きにくい１０分刻みの入力を実現する方法があれば教えていただけるとありがたいです


CC BY-SA 4.0
2020-09-25T07:18:15.790
70687
2020-09-25T08:24:54.607
2020-09-25T07:43:42.380
3060
question
html html5
HTML5 <input type="datetime-local"> step について


ページ内の挙動とポップアップ内の挙動が違うことからブラウザのバグだと思われるので、まずはバグレポートしましょう。時刻入力のポップアップUIは「[Chrome
のフォームコントロールとフォーカスのアップデート](https://developers-
jp.googleblog.com/2020/04/chrome_7.html)」から導入されたので、そのページにある「こちらのバグ
テンプレート」のリンクから報告するのが良いでしょう。

このポップアップUIを消すには、Chromium系ブラウザでは以下のようなコードを書きます。

[code]

    <input type=datetime-local>
    
    <style>
    ::-webkit-calendar-picker-indicator {
      display: none;
    }
    </style>
    <script>
    const dtl = document.querySelector('input[type=datetime-local');
    dtl.addEventListener('keydown', e => {
      if (e.altKey && e.key == 'ArrowDown' ||
          e.key == 'F4' ||
          e.key == ' ') {
        e.preventDefault();
      }
    });
    </script>
    
[/code]

別の手としては、`type=datetime-local` を諦めて、

  * `<input type=date>`
  * 時フィールド用の`<select>`
  * 分フィールド用の`<select>` (00, 10, 20, 30, 40, 50 の値のみ持つ)

に分けてしまうのも良いかもしれません。


CC BY-SA 4.0
2020-09-25T08:24:54.607
70689
2020-09-25T08:24:54.607
3475
70687
answer