44

<input type="date">ブラウザーがフィールドをサポートしていない場合、jQuery に適切にフォールバックするフィールドを使用します。比較的最近、Chrome はネイティブの日付ピッカーの提供を開始しました。これは素晴らしいことです。しかし、多くのユーザーがカレンダーを表示する小さな矢印を見逃しているため、日付を選択するための簡単なカレンダーがあるという事実を見逃していることがわかりました。

Chrome ネイティブの日付ピッカー

これをより直感的にするために、ユーザーがフォーカスを入力に移動するか、別の要素 (小さなカレンダー アイコンなど) をクリックしたときに、ネイティブの日付ピッカー UI を表示できれば素晴らしいでしょう。

Chrome で datepicker UI をトリガーする方法はありますか?

4

11 に答える 11

25

ネイティブ カレンダー コントロールを表示するようにトリガーすることはできないと思いますが、もう少し強調表示できます。

input[type="date"]:hover::-webkit-calendar-picker-indicator {
  color: red;
}
input[type="date"]:hover:after {
  content: " Date Picker ";
  color: #555;
  padding-right: 5px;
}
input[type="date"]::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
}
<input type="date" />

そのまま、たとえばドキュメントから表示されないようにすることができます：

次のコードで、ネイティブのカレンダー ピッカーを無効にすることができます。

<style>
::-webkit-calendar-picker-indicator {
    display: none;
}
</style>
<input type=date id=dateInput>
<script>
dateInput.addEventListener('keydown', function(event) {
    if (event.keyIdentifier == "Down") {
        event.preventDefault()
    }
}, false);
</script>

上記を入手したWebkitのドキュメントは次のとおりです。

http://trac.webkit.org/wiki/Styling%20Form%20Controls

日付ピッカーを表示するように回転させて作成することもできますが、マウスをページ上で移動するたびにすべてのカレンダー コントロールを飛び出させたいかどうか自問してみてください。

この回答も役に立ちました：

https://stackoverflow.com/a/15107073/451969

于 2013-03-20T18:33:59.003 に答える