it-swarm.com.de

Wie kann ich die neue Chrome HTML5-Datumseingabe deaktivieren?

Das letzte Update (V 20.x) von Chrome hat eines meiner Formulare mit dem neuen integrierten Eingabetyp für Datum und Uhrzeit beschädigt. Ich rufe jQuery UI datepicker für ein Datumsfeld auf, und es funktionierte vor dem Update einwandfrei. Nach dem Update überschreibt Chrome meinen Platzhalter und macht das Widget für die jQuery-Benutzeroberfläche unbrauchbar.

Irgendwelche Ideen, wie ich verhindern kann, dass Chrome meine Eingabefelder durcheinander bringt, ohne ihren Typ zu ändern?

35
Reda Lemeden

Sie haben verschiedene Möglichkeiten.

Sie könnten feststellen, dass der Benutzer Chrome verwendet, indem Sie die Zeichenfolge des Benutzeragenten ausfindig machen und Klickereignisse verhindern.

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

User-Agent-Sniffing ist eine schlechte Idee , aber das wird funktionieren.

Meiner Meinung nach ist es ideal, zu erkennen, ob der Browser ein natives Datepicker unterstützt, wenn er es verwendet, wenn nicht die jQuery-Benutzeroberfläche verwendet wird.

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

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

Da Chrome eine native Datumsauswahl unterstützt, würde der Benutzer dies natürlich anstelle von jQuery-Benutzeroberflächen sehen. Zumindest würden Sie jedoch keinen Zusammenstoß von Funktionalität haben und die Benutzeroberfläche wäre für den Endbenutzer nutzbar.

Das hat mich fasziniert, also habe ich etwas über die Verwendung des Datepicker von jQuery UI neben der nativen Steuerung geschrieben - to-jquery-ui/ .

Bearbeiten

Wenn Sie interessiert sind, habe ich kürzlich einen Vortrag über die Verwendung der Widgets von jQuery UI neben HTML5-Formularsteuerelementen gehalten.

40
TJ VanToll

Das funktioniert für mich:

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

Weitere Informationen zu diesem Produkt:

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

Bitte klicken Sie hier, um zu vergrößernAlt+Down Arrow(Siehe Windows 10).

Чтобы отключить, вам нужно добавить немного JavaScript:

dateInput.addEventListener('keydown', function(event) {
    if (event.keyIdentifier == "Down") {
        event.preventDefault()
    }
}, false);
1
Rakesh Vadnal

Ich stimme völlig mit TJ überein.

Wenn Sie Datumswerte bearbeiten, vorab ausfüllen oder dynamisch einstellen, müssen Sie außerdem wissen, dass Chrome ab 7/3/13 nur das ISO-Standard-Datumsformat (JJJJ-MM) berücksichtigt -dd) . Es zeigt dem Benutzer Datumsangaben im lokalen Format ('mm/tt/jj' für die USA) an, ignoriert jedoch alle im HTML-Code festgelegten Werte, die kein ISO-Standardformat sind.

Um das Laden der Seite zu konvertieren, können Sie den Benutzeragenten-Sniffer von TJ verwenden:

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; 
        }
    });
}

Wenn Sie beispielsweise die native Datepicker-Funktion deaktivieren und die jQuery-Funktion verwenden, müssen Sie auch das Datumsformat so einstellen, dass es dem Datumsfeld von Chrome entspricht. Andernfalls wird nicht die Eingabe angezeigt, die der jQuery-Datepicker sendet.

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

Fügen Sie diese beiden Dinge der ersten Option in TJs Antwort hinzu, und Sie haben jQuery's Datepicker in Chrome ohne Fehler!

Idealerweise ist es die beste Lösung, wenn Sie sich auf native Datepicker verlassen. Wenn Sie jedoch etwas benötigen, das Ausschlussdaten oder Datumsbereiche unterstützt, oder Sie einfach wollen, dass es schöner aussieht, wird dies funktionieren. 

0
Jon Weers