datetime-local in Safari auf iOS: "Bitte geben Sie einen gültigen Wert ein"


Datum: 02.06.2019 14:50

Folgendes Problem:

Ein HTML5-Formular mit folgendem Feld:

<input name="datum" type="datetime-local" value="2019-06-02T14:50:53" step="any">

Wenn man in Safari auf iOS ein Datum auswählt und dann das Formular absenden möchte, meint er immer "Bitte geben Sie einen gültigen Wert ein." bzw auf Englisch ""Please enter a valid value.".

Ursache:

Es existiert ein Bug in Safari auf iOS.
Wenn man in Safari eine Uhrzeit auswählt, wird an das Value eine Zeitzone angehängt. Die Validierung des Browsers akzeptiert das Datumsformat aber nur ohne Zeitzone am Ende.

In älteren Chrome bzw. Chromium Versionen war der Bug auch vorhanden, aber er wurde dort längst behoben. Ich habe vorhin einen Eintrag im Bugtracker des Chromium Projekts gefunden. Den Link kann ich leider nicht mehr finden. Wenn ihn jemand hat, bitte rein in die Kommentare.

Workaround:

Bei datetime-local Inputs im onChange Event die Zeitzone vom Value String abschneiden.

Mit jQuery geht das mit folgendem Code-Snippet

    // There is a bug in iOS Safari's implementation of datetime-local
    // Safari appends a timezone to value on change while the
    // validation only accepts value without timezone
    // remove the timezone from the datetime value
    // https://www.reddit.com/r/webdev/comments/6pxfn3/ios_datetimelocal_inputs_broken_universally/
    $("input[type='datetime-local']").change(function (event) {
        event.target.value = event.target.value.substr(0, 16);
    });

Kommentare

Name: *  
Homepage:  
Email: *  

 Ich habe die Datenschutzerklärung zur Kenntnis genommen. Ich stimme zu, dass meine Angaben und Daten zur Beantwortung meiner Anfrage elektronisch erhoben und gespeichert werden. Hinweis: Sie können Ihre Einwilligung jederzeit für die Zukunft per E-Mail an daten-entfernen@deruli.de widerrufen.

Es sind bisher noch keine Kommentare zu diesem Artikel vorhanden.

Don't click this link