Input type date forcer le mois afficher par le calendrier

Version imprimable

15/10/2019, 15h26
CinePhil

Input type date forcer le mois afficher par le calendrier

Bonjour,

Soit un input de type date. Quand on clique dessus, ça affiche un petit calendrier, par défaut au mois en cours et avec le jour actuel pré-sélectionné.

Avec les paramètres min et max, on peut contrôler la plage de dates autorisées. Au clic sur l'input, le calendrier s'affiche toujours au mois en cours mais la date du jour n'est pas pré-sélectionnée si elle n'est pas dans la plage de dates autorisées.

Ce que je souhaiterais, c'est afficher le calendrier par défaut sur aujourd'hui - 21 ans.

J'ai réussi à le faire en JQuery avec le DatePicker mais est-il possible de faire ça sans le DatePicker ?
15/10/2019, 15h53
Invité
Bonjour,
- <input type="date" />
Il suffit de définir la value, non ? :weird:

Code:

<input type="date" value="1998-10-15" />
15/10/2019, 16h18
CinePhil

Peut-être, mais alors cette value sera retournée avec le formulaire même si une vraie valeur n'a pas été saisie par l'utilisateur.

Mon cas précis est la saisie d'une date de naissance d'étudiant en master. Il peut y avoir des adultes de potentiellement 60 ans qui passent un master sur le tard pour avoir une promo avant la fin de leur carrière mais qu'un jeune de moins de 21 ans s'inscrive est logiquement impossible.
Et comme je ne connais pas la date de naissance à l'avance, la valeur est donc vide par défaut mais celle saisie doit se situer entre "il y a 60 ans" et "il y a 21 ans".
Et comme il y a quand même une majorité de jeunes, je voudrais positionner le calendrier sur "il y a 21 ans".
15/10/2019, 16h25
CinePhil

Alors effectivement, avec une valeur par défaut, le calendrier se positionne sur cette date et il y a une croix d'annulation de la valeur à côté de la date dans la zone de texte.
Je crains quand même que mes collègues oublient de cliquer sur la croix si la date de naissance n'est pas encore connue.

Bon je leur expliquerai quand je présenterai le machin.

Mais s'il y avait une technique, même en javascript, pour agir sur le calendrier sans programmer de valeur par défaut pour le champ, je serais preneur.

J'ai essayé d'utiliser l'attribut placeholder à la place de value mais c'est inopérant pour le type date, semble t-il. :(

Une "astuce" qui à l'air de faire la farce :

Code:

1
2
<label for="la-date">Date:</label>
<input type="date" id="la-date" name="la-date" value="" />

Code:

1
2
3
4
5
6
7
8
9
"use strict";
document.getElementById('la-date').addEventListener('click', function(e){
  let elt = this;
  if( elt.value == '' )
  {
    elt.value = '1998-10-15'; // on définit une date par défaut (pour positionner le calendrier)
    setTimeout(function(){ elt.value = ''; }, 1); // on remet ''
  }
});

15/10/2019, 17h56
CinePhil

Merci, je regarderai ça. :plusser:
15/10/2019, 18h34
ProgElecT

Salut

Citation:

Peut-être, mais alors cette value sera retournée avec le formulaire même si une vraie valeur n'a pas été saisie par l'utilisateur.

Ne serait-il pas possible d'initialiser un variable global égal à False, qui au premier clique sur le choix de date passerait à True, au moment de la soumission, en vérifiant cette variable il serait possible d’empêcher de quitter la page si sa valeur est toujours à False.

Merci, ça fonctionne. :D

Voici la version JQuery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
	/**
	 * Valeur par défaut de la date de naissance sur click sur le champ
	 */
	$("#dateNaissance").click(function()
	{
		var date_defaut = new Date();
		date_defaut.setFullYear(date_defaut.getFullYear() - 21);
 
		let elt = $(this);
		if(elt.val() == '')
		{
			elt.val(date_defaut.toISOString().substring(0, 10));
			setTimeout(function(){ elt.val(''); }, 1);
		}
	});