web-dev-qa-db-fra.com

Mobile Safari (10.3.1) Erreur DateTime-Local "Entrez une valeur valide"

Je reçois une erreur sur les nouvelles versions d'iOS 'Mobile Safari. Cette erreur ne s'est pas produite avant la version 10.3 d'iOS. Quelqu'un peut-il me diriger dans la bonne direction à ce sujet?

Voici le code HTML brut et la vue inspectée et la vue du périphérique mobile (iPhone 7).

 Inspector View  iPhone 7 View

iosiphonehtml5inputsafari
8
Mark Tomlin

Solution simple!

IOS nécessite qu'une valeur soit définie sur un champ d'entrée de type "datetime-local".

Exemple: <input type="datetime-local" value="2000-07-01T12:00" />

C'est tout :)

Je trouve personnellement agréable de définir la valeur par défaut sur l'heure locale actuelle de l'utilisateur. Cela doit être formaté en ISOTime sans secondes, donc le code pourrait être quelque chose comme:

// get the iso time string formatted for usage in an input['type="datetime-local"']
var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
var localISOTime = (new Date(Date.now() - tzoffset)).toISOString().slice(0,-1);
var localISOTimeWithoutSeconds = localISOTime.slice(0,16);

// select the "datetime-local" input to set the default value on
var dtlInput = document.querySelector('input[type="datetime-local"]');

// set it and forget it ;)
dtlInput.value = localISOTime.slice(0,16);
4
Frank Turano

Ce message est déclenché par une validation côté client. Si vous n'utilisez pas la validation côté client, j'ai découvert que vous pouvez résoudre ce problème en le désactivant à l'aide de l'attribut novalidate comme suit:

<form action="/myaction" method="POST" novalidate>
4
Matt

Il semble que ce soit un bogue dans Safari, mais vous pouvez le ignorer en utilisant javascript pour soumettre le formulaire.

$("#new_apply_form").submit();
3
Eric Guo

C'est un bug dans Safari. Vous devez utiliser JS pour envoyer le formulaire à la place.

JS: form.submit();

1
Joshua

Pour ceux qui luttent toujours avec IOS datetime-local identique à moi.

Ceci est dû à IOS définir la valeur date-locale dans un format non valide lorsque valeur attribut/propriété non définie ou définie avec une valeur non valide.

<input type='datetime-local' onChange='alert(event.target.value)'>

Cela alertera avec le format 'aaaa-MM-jjThh: mm: ss tel que 2018-12-25T12: 00: 00 qui contient une chaîne de secondes non autorisée.

Pour le contourner, définissez simplement la valeur avec une forme valide.

const onChange = (event) => {
    event.target.value = event.target.value.substr(0, 16);
}

C'est ça.

0
NamHoon Jung