Input type text, auto format en date française avec effet de placeholder

Si l’on veut se passer de l’élément de formulaire de type date, pour une raison ou une autre, par exemple si l’on veut laisser l’utilisateur saisir directement la date dans une zone de saisie, en se passant le la mise en forme par défaut, et sans risquer de se tromper sur le format attendu en fonction du paramètre locale de la page, on peut proposer une zone de saisie simple de type text que l’on contrôle en fonction du format attendu.

Copie d'écran de la zone de saisie sur fond du village de Vieste sur la côte adriatique de l'Italie

Par exemple, si l’on demande à un utilisateur français de remplir sa date de naissance, ce dernier a pour habitude de saisir un format dd/mm/YYYY. On écrit un placeholder montrant le format attendu. On anime ce placeholder ainsi que cela ce fait maintenant en le déplaçant en haut à droite de l’élément de saisie, pour rappeler de façon constante à l’utilisateur le format attendu. Effet de placeholder sur un input expose un exemple de ce type de placeholder.

Demo

See the Pen Input type text, auto format to date FR, placeholder effect by xavier bs (@xavier_bs) on CodePen.

Code

Cet exemple permet de contrôler l’entrée de l’utilisateur. La méthode frameNumber(max, min) formatte une chaîne de caractère représentant un nombre. Si ce nombre est sur une longueur de 1 caractère, elle ajoute un 0 devant pour avoir une chaîne de caractère d’une longueur 2. La méthode contrôle en outre un encadrement de ce nombre entre deux valeurs entières : max et min. Si le nombre est inférieur à min, elle renvoie la chaîne ${min}, et s’il est supérieur à max, elle renvoie ${max} :

On écrit une méthode qui renvoie un booléen pour savoir si l’on est dans l’élément de formulaire à surveiller, auquel on a donné la classe input-date-text :

On écoute l’événement keydown pour n’autoriser que les entrées de nombres, et les touches Backspace, Shift, Delete, ArrowLeft et ArrowRight :

On écoute l’événement input pour reformatter l’entrée de l’utilisateur. On encadre l’année sasie par l’année courante et 150 ans en arrière. Pour une date de naissance cela suffit largement :

Lorsque l’on enlève le focus de la zone de saisie, c’est-à-dire lorsque l’utilisateur sort de la zone avec un clic de souris, on vérifie le format entré. Si la valeur ne correspond pas au motif, on efface la chaîne entrée et l’on ajoute un effet de clignotement pour alerter l’utilisateur. Le clignotement est défini en SCSS avec une petite animation :

Il suffit alors d’ajouter la classe blink5 pour ajouter l’effet.

Écoute de la sortie de la zone de saisie

Lorsque l’utilisateur sort de la zone de saisie, on contrôle la valeur entrée. Si cette saisie ne convient pas, on efface cette saisie. On est obligé, puisque l’on ajoute l’effet de placeholder (ci-après) d’enlever également la classe focus de notre élément input. On peut remettre le focus dans la zone de saisie, pour obliger l’utilisateur d’entrer une date. Ici l’instruction e.target.focus() est en commentaire. Tout cela est à adapter au comportement désiré.

Effet de placeholder

J’ajoute un effet de placeholder comme dans l’article Effet de placeholder sur un input. Je définis la méthode inputEffect pour reformatter mon élément :

Et l’on ajoute les styles suivants en SCSS, afin de mettre en forme l’effet de placeholder :

L’élément input devra avoir la classe input-placeholder. On applique le script de mise en forme de la zone de saisie qui porte la classe input-placeholder de la façon suivante :

Notre élément input a donc la structure HTML suivante :

Et hop, une jolie zone de saisie, pour contrôler le format date entré par l’utilisateur. Bien-sûr, la date lue sera au format dd/mm/YYYY. Pour entrer cette valeur dans une base de donnée, le format devra être changé pour obtenir un format date qui pourra être inséré dans une table :

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.