11

type="date" の入力がいくつかあり、jQuery の日付ピッカーを使用しているため、Microsoft Edge の既定の日付ピッカーを無効にしたいと考えています。CSS または JavaScript を使用してこれを無効にするにはどうすればよいですか? Chrome と Firefox では正常に動作しますが、Edge では動作しません。任意の回答をいただければ幸いです。

動作中のjsFiddle

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

<input type="date">

JS

$(document).ready(function() {
    if (!Modernizr.inputtypes.date || $(window).width() >= 900) {
        $('input[type=date]').datepicker();
    }
});

$(window).resize(function() {
    if (!Modernizr.inputtypes.date || $(window).width() >= 900) {
        $('input[type=date]').datepicker();             
    }
    else {
        $('input[type=date]').datepicker("destroy");
    }
});

CSS

input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-calendar-picker-indicator  {
    display: none;
    -webkit-appearance: none;   
}
4

4 に答える 4

2

Edge でネイティブの datepicker コントロール機能を無効にすることはできません (ただし、Chrome はハックを介して無効にすることができます)-とにかく。

入力コントロールは、ブラウザによって設計されていない限り、一般的にシステム コントロールに基づいています。これは、入力日付ピッカーが入力日付ピッカーであり、selectドロップダウン リストがドロップダウン リストであることを意味selectします。

ほとんどのコントロールは、境界線、パディング、フォント スタイルなどの基本的なスタイル設定、HTML 標準属性 ( placeholder.

いくつかのオプションがあります。

デフォルトの日付ピッカー コントロールをそのままにしておく

これは私が推奨するオプションです。デフォルトのシステム コントロール (適用可能な場合は + スタイル) をそのまま使用することが、通常は最善のポリシーです。これにより、デバイスの互換性が最大限に確保され、ユーザーにとって使い慣れたものになります。さらに、通常はすべて「正常に動作」します。

JS コードのオーバーヘッドも少なくなります。

悪意のあるオプション: ブラウザ検出

JS コードでブラウザーが Edge かどうかを検出し、代わりに jQuery コントロールをレンダリングするように指示できます。ブラウザーの検出が古くなり、メンテナンスの悪夢がすぐに発生するため、本当に必要な場合を除き、これは避けるべきです。

于 2015-11-17T07:33:49.877 に答える
2

入力タイプは、日付ではなくテキストである必要があります。これ...

<input type="date" />

する必要があります

<input type="text" />

それ以外の場合、Chrome と Edge は日付ピッカーを追加します。代わりにクラスまたはIDを使用してdatepickerとして識別し、次のようにします$(".datepicker").datepicker();

于 2017-07-07T12:34:05.387 に答える