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
Prérequis : html, css, utilisation de l'inspecteur du navigateur

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 aux 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-classes :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 champ de type "time" : Il permet de saisir une heure au format 11:59
  • Le champ 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'ils 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 cal rendu Chrome rendu 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 saisis comme les attributs "min" et "max" le demandent. Du 1e janvier 2020 au 31 décembre 2029 pour le champ 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".

11 commentaires

    • 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.

  • Où s'effectue la déclaration

    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.

    • 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…

      • >Dur, dur

        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ù insérer.
        champ de type date
        champ de type time
        Je boucle ....

        Merci

  • Je vais devoir creuser un peu

    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.

    • Trouvé !

      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.
      À 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.

      • 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 styles 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

  • Salut Eddy,
    Ca marche super, merci ! La vidéo est bien utile ;-) Par contre comment mettre un min ou un max ? Mon champ est un champ date dans lequel on doit entrer sa date de naissance. Je souhaite donc limiter à 1930 en min, et à l'année en cours en max. C'est possible ? (suis sûre que oui vu la puissance de ce composant !=
    Merci d'avance
  • Salut Kami.

    Pour exemple sur un champ nommé 'date', le script suivant ne permet ni la sélection d'une date précédent le 1e Janvier 1930 ni une date supérieure à la date du jour et c'est dynamique.

    function ff_NomDuFormulaire_init()
    {
    // Obtenir la date du jour = Sun Mar 24 2024 15:26:34 GMT+0100 (heure normale d’Europe centrale)
    var now = new Date();
    
    // Extraire l'année, le mois et le jour
    var year = now.getFullYear();
    var month = ('0' + (now.getMonth() + 1)).slice(-2); // Les mois commencent à partir de 0, donc on ajoute 1
    var day = ('0' + now.getDate()).slice(-2);
    
    // Formater la date au format aaaa-mm-jj
    var today = year + '-' + month + '-' + day;
    
    // Afficher la date formatée
    // console.log(today);
      
      const dateField = ff_getElementByName('date'); // date est le nom du champ
      dateField.type = 'date';
      dateField.setAttribute('min','1930-01-01');
      dateField.setAttribute('max', today);
    }

Connectez-vous pour poster un commentaire

Afin d'éviter les messages indésirables, les commentaires sont réservés aux membres inscrits. Veuillez vous inscrire ou vous connecter pour publier votre commentaire

FAIRE UN DON

paypal btn

Via PayPal

PLUGIN UP DE LOMART

Universal Plugin : UP

De très nombreuses actions pour vos articles en un unique plugin.
up lomart