1

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

<input type="datetime-local" step=600>

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

画像の説明をここに入力

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

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

1 件の回答 1

1

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

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

<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>

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

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

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

この質問に回答するには、ログインする必要があります。