Discussion :

[CinePhil]

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 ?

[Invité]

Bonjour,

• <input type="date" />

Il suffit de définir la value, non ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="date" value="1998-10-15" />

[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".

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

[Invité]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ''
  }
});

[CinePhil]

Merci, je regarderai ça.