web-dev-qa-db-ja.com

新しいChrome HTML5日付入力を無効にするにはどうすればよいですか？

Chromeの最近の更新（V 20.x）は、新しい組み込みの日付と時刻の入力タイプでフォームの1つを壊しました。更新前は完全に機能していました。更新後、Chromeはプレースホルダーをオーバーライドし、jQuery UIウィジェットを使用できなくします。

Chrome=がタイプを変更せずに入力フィールドを台無しにするのを防ぐ方法はありますか？

jquery-uigoogle-chromedateinputdatepicker
35
Reda Lemeden

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

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

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

ユーザーエージェントのスニッフィングは悪い考えです 、しかしこれは動作します。

私の頭の中の理想的なアプローチは、ブラウザーがネイティブの日付ピッカーをサポートしているかどうかを検出することです。

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の代わりにそれを見ることができます。 。

これに興味をそそられたので、ネイティブコントロールと共にjQuery UIのdatepickerを使用することについて書きました- http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a- fallback-to-jquery-ui / 。

編集

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

40
TJ VanToll

これは私のために働く：

;
(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);
2
Jeff Tian

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

.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);
1
Rakesh Vadnal

TJに完全に同意します。

日付値の編集、事前入力、または動的な設定を行っている場合は、7/3/13の時点でそれを知る必要もあります 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; 
        }
    });
}

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

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

TJの答えの最初のオプションにこれらの2つのことを追加すると、jQueryのdatepickerがChromeでエラーなしで動作します！

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

0
Jon Weers