Les input's de type "Temps" html5

HTML5 a amené son lot de types de champs pour les formulaires. Nous avons déjà vu les champs de type range pour les sliders (sélection de nombre par glissière), voyons les champs de sélection de temps…

Niveau : Moyen, Avancé
Version BF minimale requise : BreezingForms Lite

Les champs "Temps" et BreezingForms

BreezingForms offre deux types de champs pour la sélection de date. Les champs Calendrier et Calendrier responsive pour lesquels on peut choisir le format dans les propriétés du champ.

Ces champs, qui sont de type Text sont parfaitement fonctionnels cependant, il peut-être intéressant de connaître les champs de type date et time, datetime étant un peu au rebus concernant la compréhension des navigateurs…

Les champs "Natifs"

Les sélecteurs des types de champs dont nous débattons ici ne sont soumis à aucun style de template en ce qui concerne leur mode de sélection. Ils sont compris par les navigateurs modernes et chacun de ces navigateurs affichera le champ selon sa propre définition et selon le terminal utilisé. P.ex. Chrome sur ordinateur aura une représentation différente de Chrome sur terminal mobile. Dans les cas où le type de champ est pris en compte par le navigateur, il sera affiché avec une certaine optimisation. Ils sont également sujets à personnalisation selon que la donnée entrée soit valide ou pas et à l'aide des pseudo-classe :valid et :invalid.

Nous pouvons utiliser ce type de champs dans BreezingForms mais, ce dernier ne les ayant pas (encore ?) implémentés, il faudra forcer leur type à l'aide d'un tout petit peu de JavaScript facile et rapide à mettre en œuvre.

Les différents types

Les champs de type "sélection de temps" se présentent sous diverses formes, sélection de date, sélection d'horaire ou mélange des deux
Ces types de champs ont certains avantages mais aussi quelques inconvénients. Il est cependant instructif de s'y intéresser.

Les types de champs "Temps"

  • Le champ de type "date" : Comme son nom l'indique il permet de sélectionner une date à l'aide d'un calendrier (pour les navigateurs compatibles).
  • Le champs de type "time" : Il permet de saisir une heure au format 11:59
  • Le champs de type "datetime" : Ce champ est une combinaison des deux précédents. Malheureusement sa compatibilité n'est pas encore, à l'heure de la rédaction de ces lignes, effective pour tous les navigateurs.

Mise en œuvre

Champ de type "date" et "time"

Les champs de type "date" et "time" s'obtiennent en déclarant le type correspondant aux éléments input qui les recevront :

<label for"maDate">champ de type date</label> <input type="date" id="maDate" name="maDate">
<label for"monHoraire">champ de type time</label> <input type="time" id="monHoraire" name="monHoraire">

Ces inputs ressemblent à ceci dès lors qu'il ne sont formatés par aucun css.

datime input 01

Ces deux types de champs peuvent recevoir des attributs supplémentaires de type min (date ou heure minimum), max (date ou heure maximum) et step (le pas d'incrémentation (ne fonctionne pas sur tous les navigateurs)).

Il est possible de saisir une date ou une heure dans ces champs et au clic sur le label du champ date ou sur le champ lui-même, un calendrier s'affiche permettant de sélectionner une date. Ce calendrier aura une allure différente selon le navigateur et le terminal utilisé.

Le champ time affiché sur les mobiles permet de sélectionner l'heure en tournant les aiguilles de la montre affichée…

Sur ordinateur, Chrome et Opera ont un affichage identique, Firefox à son propre affichage et sur mobile chacun des navigateurs a sensiblement le même rendu. Je n'ai pu tester que des navigateurs mobiles fonctionnant sous Android et non sous iOS. Je n'ai pu tester Edge puisque je travaille sur un ordinateur Apple mais les liens en fin d'article vous permettrons de voir ce à quoi ressemblent les sélecteurs dans le navigateur de Microsoft.
Safari, le navigateur de MacOS, n'y comprend rien et n'affiche qu'un champ de texte classique dans lequel il est toutefois possible de saisir une date ou une heure…

Quelques rendus

datetime calrendu Chromerendu Smart

Mise en œuvre dans un formulaire BreezingForms

Afin de mettre en forme ces deux types de champs dans un formulaire BreezingForms, créez deux champs de type texte, le premier nommé date et le second time. Intitulez-les comme vous le souhaitez.

Ces deux champs créés, il faudra un peu de JavaScript pour leur attribuer le bon type de champ.

Rendez-vous dans les propriétés avancées de votre formulaire → Plus d'options → Onglet Scripts → Script d'initialisation → Cochez Personnalisé et cliquez Créer la structure du code.

Entre les accolades du code présent, saisissez :

    ff_getElementByName('date').type = 'date';
    ff_getElementByName('time').type = 'time';

Vos deux champs se voient désormais leur type modifié de text à date ou time et sont opérationnels.

Personnalisation

Vos thèmes BreezingForms ne connaissent pas ces types de champ et il faudra modifier un peu vos css pour adapter le rendu de ces deux types de champs à votre thème.

Exemple

Les champs suivants se trouvent dans un formulaire BreezingForms et sont formatés pour afficher une erreur s'ils ne sont pas saisi comme les attributs "min" et "max" le demandent. du 1e janvier 2019 au 31 décembre 2025 pour le champs date et de 08:00 à 17:45 par pas de 15 minutes pour le champ time.

Vous trouverez d'avantage d'informations au sujet de ces types de champs p.ex. en suivant ces liens type="date" et type="time".

Cet article vous a plu ?
N'hésitez pas à laisser une évaluation en haut de page afin de me faire part de votre impression !

Commentaires  
philament
0#Mais que c'est compliqué..philament06-06-2020 10:30
Hello,
Je suis complètement largué.. Auriez vous une vidéo, un tuto pour la mise en oeuvre ?

Merci pour votre site
Eddy
0#RE: Les input's de type "Temps" html5Eddy06-06-2020 12:19
Bonjour.

Il n'y a pas de vidéo mais la mise en œuvre est très simple.
Il suffit de suivre les étapes décrites dans la section "Mise en œuvre dans un formulaire BreezingForms".
Toutes les étapes sont indiquées, il faut bien sûr enregistrer l'insertion du script avant de revenir au formulaire.
Arouezva
0#Où s'effectue la déclarationArouezva31-07-2021 16:44
Bonjour,
J'ai bien lu toutes les étapes, mais je butte sur la phrase :
"Les champs de type "date" et "time" s'obtiennent en déclarant le type correspondant aux éléments input qui les recevront :"
Je ne vois pas où ces déclarations doivent être effectuées.
Une petite démo à télécharger serait pour moi la bien-venue.
Merci encore pour le reste de ces tutos.
Eddy
0#RE: Les input's de type "Temps" html5Eddy31-07-2021 17:44
Bonjour.

Et pourtant tout ce dont vous avez besoin se trouve décrit dans la section "Mise en œuvre dans un formulaire BreezingForms".

Nous avons créé deux champs, l'un nommé "date" et l'autre "time".

Rendez-vous dans les propriétés avancées de votre formulaire → Plus d'options → Onglet Scripts → Script d'initialisation → Cochez Personnalisé et cliquez Créer la structure du code.

Entre les accolades du code présent, saisissez :

ff_getElementByName('date').type = 'date';
ff_getElementByName('time').type = 'time';

Enregistrez le script et testez votre formulaire…
Arouezva
0#Dur, durArouezva31-07-2021 18:08
Re-bonjour,
Cette partie là a déjà été appliquée et j'ai créé un champ de type texte avec comme libellé "time" et comme nom "time"
Le formulaire ainsi créé propose lors du test un champ libellé "time" de type texte.

La seule différence qu'il me semble voir ce sont ces 2 lignes (dans mon cas, la seconde) que je ne sais pas où inserer.
champ de type date
champ de type time
Je boucle ....
Merci
Arouezva
0#suite de dur, durArouezva31-07-2021 18:12
je vois que mes deux lignes ont été tronquées
'champ de type date
champ de type time '
car certainement interprétées par le navigateur. Donc nouvel essai entre quote.
Eddy
0#RE: Les input's de type "Temps" html5Eddy31-07-2021 21:03
Pourtant je vous l'indique dans le tutoriel et dans mon message ci-avant !
Sélectionner le formulaire, Propriéftés avancées -> plus d'options -> onglet script…

Voià une vidéo montrant la manipulation. https://youtu.be/5mOYoxBpKNg

PS : "Champ de type date" et "Champ de type time" sont tout simplement mes libellés pour l'exemple, pour que ce soit clair !
Arouezva
0#Je vais devoir creuser un peuArouezva01-08-2021 08:53
Bonjour,
Je viens de créer un nouveau formulaire, avec ces deux seuls champs et cela marche comme vous l'aviez prévu.
Auparavant, j'essayais d'inclure ces deux champs, en incluant les scripts, dans un formulaire existant et cela ne fonctionnait pas ! Il va donc falloir creuser mon formulaire pour trouver la cause de ce comportement étonnant, tout le reste fonctionnant très bien par ailleurs.
Bonne journée et merci encore.
Arouezva
0#Trouvé !Arouezva02-08-2021 15:51
Bonjour,
C'est fait, j'ai enfin trouvé. Un if dans script avec un i majuscule !!!
Et oui, après avoir tout relu une vingtaine de fois et avoir tout recréer le formulaire sans utiliser de copier/coller que j'ai enfin trouvé. Mon piètre niveau dans le JavaScript explique cela.
Tout fonctionne bien et même mes tests pour n'autoriser que des heures comprises entre 11:00 et 13:00 par tranches de 15 minutes.
A ce sujet, existe-t-il un moyen pour insérer, à la bonne place dans le formulaire, un code html du type :
input type="time" name="Heure de départ prévue" value="" id="time" min="11:00" max="13:00" step="900"
avec le label correspondant et dont la valeur saisie serait une donnée à enregistrer ?
Si vous aviez la réponse, cela permettrait de valider le champ dès sa saisie ce qui est plus pratique que lors du changement de page.
Bonne journée et merci encore pour votre aide.
Eddy
0#RE: Trouvé !Eddy03-08-2021 06:35
Bonjour.

En effet le javascript est sensible à la casse. une capitale où il n'en faut pas et rien ne fonctionne !

Pour la définition des horaires, il semble que vous ayez pu paramétrer votre champ et vous obtenez donc dans le code html le type de champ que vous désirez avec les attributs correctement renseignés :


Pour la validation, il suffirait de créer des style pour le champ à l'aide des pseudo classes :valid ou :invalid, comme le fait le formulaire de test ci-dessus si vous entrez des données qui n'entrent pas dans les propriétés indiquées.

Voir ici : https://developer.mozilla.org/fr/docs/Web/CSS/:valid

Les commentaires sont réservés aux membres enregistrés. Si vous êtes membre, veuillez vous connecter sinon, n'hésitez pas à vous enregistrer !

Considérez un don!

Vous avez trouvé des réponses à vos questions, les tutoriels disponibles vous ont aidé à monter votre formulaire et vous souhaitez m'être reconnaissant pour le contenu attractif de ces pages ?

paypal btn

Via PayPal ou Stripe.

Vos dons m'aident à maintenir le site et à vous proposer encore plus de tutoriels pour vous aider encore d'avantage.

x