J'essaie d'utiliser datetime-local pour choisir à la fois la date et l'heure.
L'entrée fonctionne bien, malheureusement je n'arrive pas à faire fonctionner l'attribut step .
La documentation MDN semble suggérer que je devrais pouvoir l'utiliser pour définir une étape en quelques secondes, mais cela ne fonctionne tout simplement pas .
<form method='post' action='#'>
<input
type="datetime-local"
id="meeting-time"
name="meeting-time"
value="2018-06-12T19:30"
min="2018-06-07T00:00"
max="2018-06-14T00:00"
step="900"
/>
<input type='submit' value='Go!'>
</form>Est-ce que je manque quelque chose?
3 Réponses :
La valeur de l'attribut Step doit être exprimée en secondes. Dans votre exemple, vous avez donné 900, ce qui correspond à 15 minutes. Votre exemple dans codesandbox fonctionne comme prévu.
Pour les entrées datetime-local, la valeur de step est donnée en secondes, avec un facteur de mise à l'échelle de 1000 (puisque la valeur numérique sous-jacente est en millisecondes). La valeur par défaut de l'étape est 60, indiquant 60 secondes (ou 1 minute ou 60 000 millisecondes).
Comment cela aide-t-il? OP a déjà cité la documentation et fourni le code qui suit la documentation, ce qui ne fonctionne pas pour lui. Lui dire que cela fonctionne et citer à nouveau la documentation ne cherche pas vraiment à trouver une solution. C'est probablement une question de version de navigateur.
@Toby J'ai oublié de citer J'utilise le navigateur Chrome 86, mentionné par Eight. Je ne lui dis pas la solution. Je dis juste que cela fonctionne et c'est le doc dit. 😂
Votre problème peut être votre navigateur. Le site Web CanIUse indique que datetime-local n'est actuellement pas pris en charge par Firefox, IE ou Safari.
J'ai exécuté votre exemple de code dans Google Chrome 86 et il fonctionne correctement avec une étape de 15 minutes.
J'ai exécuté votre code dans Firefox 82 et la zone de saisie agit comme un type d'entrée de text plutôt que comme un type datetime-local .
Je suis sur la version 86.0.4240.198 (version officielle) (x86_64) et cela ne fonctionne pas du tout. Testé sur macos et windows.
86.0.4240.198 (Official Build) (64-bit) Sur cette version, les flèches haut et bas font défiler la valeur de temps par les montants de pas. Vous pouvez toujours saisir une valeur de temps non échelonnée telle que 22 .
Bon, je pense que le malentendu était que je m'attendais à ce que les étapes fonctionnent dans le calendrier dans le calendrier. Merci d'avoir répondu :)
@Eight La spécification HTML actuelle n'accepte pas si des valeurs de temps incorrectes sont insérées dans cette entrée. Votre meilleur pari serait de vérifier ces données par tout ce qui reçoit le formulaire.
Donc, ma confusion vient du fait que l' step ne modifie pas les étapes qui apparaissent dans le calendrier ni n'empêche les utilisateurs de saisir l'heure eux-mêmes.
L'attribut step "fonctionne" dans le sens le plus lâche possible en ce sens qu'il permet aux utilisateurs de passer d'une valeur à l'autre avec des flèches après les avoir sélectionnées avec le clavier.
Veuillez coller votre code ici dans la question au cas où votre lien mourrait.
En ne fonctionnant pas, voulez-vous dire que vous ne voyez tout simplement aucun bouton pas à pas? Je ne les vois pas dans votre exemple sur Edge ou Chrome. C'est un support très irrégulier ... on dirait que la réponse ci-dessous peut les voir.
Pour autant que je sache, ceux-ci n'entrent en jeu que lors de la validation lors de la soumission et non dans l'interface utilisateur elle-même. Comme le support @Toby est irrégulier.
@John sur Google Chrome, l'attribut step fonctionne directement sur l'entrée elle-même plutôt que sur l'entrée lors de la soumission du formulaire.
Je dis qu'il n'y a pas d'étape. Le calendrier s'ouvre mais toutes les minutes sont là. Est-ce que c'est ce qui devrait arriver?
L'étape est-elle censée fonctionner uniquement sur l'entrée elle-même plutôt que sur le calendrier qui apparaît?
@Eight Oui, je ne semble pas s'appliquer au calendrier contextuel et la prise en charge de l'entrée elle-même semble varier d'un navigateur à l'autre.
Ah, eh bien je suppose que cela répond à cela. J'étais très confus par tout le monde disant que cela fonctionnait 😂 Merci de toute façon pour cette clarification!