35

Chromeの最近のアップデート（V 20.x）は、新しい組み込みの日付と時刻の入力タイプで私のフォームの1つを壊しました。日付フィールドでjQueryUIdatepickerを呼び出していますが、更新前は完全に機能していました。更新後、Chromeはプレースホルダーを上書きし、jQueryUIウィジェットを使用できなくなります。

Chromeが入力フィールドのタイプを変更せずに混乱するのを防ぐ方法について何かアイデアはありますか？

4

4 に答える 4

41

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

ユーザー エージェント文字列をスニッフィングし、クリック イベントを防止することで、ユーザーが Chrome を使用していることを検出できます。

if (navigator.userAgent.indexOf('Chrome') != -1) {
    $('input[type=date]').on('click', function(event) {
        event.preventDefault();
    });
}

ユーザー エージェント スニッフィングは悪い考えですが、これは機能します。

私の考えている理想的なアプローチは、ブラウザーがネイティブの日付ピッカーをサポートしているかどうかを検出することです。それを使用している場合は、jQuery UI を使用していない場合です。

if (!Modernizr.inputtypes['date']) {
    $('input[type=date]').datepicker({
        // Consistent format with the HTML5 picker
        dateFormat: 'yy-mm-dd'
    });   
}​

例 - http://jsfiddle.net/tj_vantoll/8Wn34/

もちろん、Chrome はネイティブの日付ピッカーをサポートしているため、ユーザーには jQuery UI の代わりに日付ピッカーが表示されます。しかし、少なくとも機能の衝突はなく、エンド ユーザーが UI を使用できるようになります。

これに興味をそそられたので、jQuery UI の日付ピッカーをネイティブ コントロールと一緒に使用する方法について書きました。jquery-ui/ .

編集

興味があれば、私は最近、jQuery UI のウィジェットを HTML5 フォーム コントロールと一緒に使用する方法について講演しました。

于 2012-06-30T02:25:19.340 に答える
2

矢印ボタンとスピン ボタンを削除するには:

.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

Alt+を押すと、引き続きカレンダーをアクティブにすることができDown Arrowます（Windows 10で確認）。

無効にするには、JavaScript を少し追加する必要があります。 

dateInput.addEventListener('keydown', function(event) {
    if (event.keyIdentifier == "Down") {
        event.preventDefault()
    }
}, false);
于 2016-12-20T12:36:36.020 に答える
2

これは私のために働く：

;
(function ($) {
    $(document).ready(function (event) {
        $(document).on('click input', 'input[type="date"], input[type="text"].date-picker', function (e) {
            var $this = $(this);
            $this.prop('type', 'text').datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: 'yy-mm-dd',
                showWeek: true,
                firstDay: 1
            });

            setTimeout(function() {
                $this.datepicker('show');
            }, 1);
        });
    });
})(jQuery, jQuery.ui);
于 2014-09-18T10:26:30.233 に答える
0

私はTJに完全に同意します。

何らかの編集、事前入力、または日付値の動的設定を行っている場合は、2013 年 7 月 3日現在、Chrome は ISO 標準の日付形式 (yyyy-mm-dd) のみを尊重していることも知っておく必要があります。 ）。日付はローカル形式 (米国の場合は「mm/dd/yy」) でユーザーに表示されますが、ISO 標準形式ではない HTML に設定された値は無視されます。

ページの読み込み時に変換するには、TJ のユーザー エージェント スニファーを使用して、次のようにします。

if (navigator.userAgent.indexOf('Chrome/2') != -1) {
    $('input[type=date]').each(function(){
        var d = trim(this.getAttribute('value'));
        if (d){
            d = new Date(d);
            var dStr = d.toISOString().split('T')[0];
            this.value = dStr; 
        }
    });
}

たとえば、ネイティブの datepicker を無効にして jQuery を使用する場合は、Chrome の日付フィールドと一致するように日付形式を設定する必要があります。そうしないと、jQuery の datepicker が送信する入力が表示されません。

$('#myDate').datepicker({dateFormat: 'yy-mm-dd'});

これら 2 つのことを TJ の回答の最初のオプションに追加すると、jQuery の日付ピッカーが Chrome でエラーなく動作します。

ネイティブの日付ピッカーに依存することは、理想的には最良のソリューションです。ただし、除外日や日付範囲をサポートするものが必要な場合、または単純に見栄えを良くしたい場合は、これでうまくいきます.

于 2013-07-02T22:47:16.703 に答える