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').tyme = '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 août 2019 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".

Vous avez trouvé cet article intéressant ?
N'hésitez pas à l'évaluer en haut de page Je vous en remercie d'avance.

 Ajouter un commentaire
En utilisant ce formulaire de commentaires, vous acceptez que les informations demandées soient enregistrées, affichées ci-dessous et utilisées pour un éventuel contact (dans ce cas, n'oubliez pas de renseigner votre e-mail). L'adresse e-mail n'est jamais affichée aux visiteurs.