5568 sujets

Sémantique web et HTML

[Résolu] Input date est-il possible sans les années

Bonjour, je cherche à savoir si il existe un type d'input en HTML qui ne gère pas les années :

du coup un calendrier qui aille du 01/01 au 31/12 sans précision d'année!

J'ai vu que le type month permettait d'avoir mois et années...

le type date jj/mm/aaaa....

moi il me faudrait donc un type (ou un paramétrage de date) qui donne juste : jj/mm

Actuellement j'ai ceci :

test date :<input type="date" name="anniversaire">

ou encore ceci :


                <!-- insertion code jquery du calendrier -->
        <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
        <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> 
 
    </head>  
         
     <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
 
Date: <input type="maDate" id="datepicker">



Mais j'ai toujours les années...
Merci
Modérateur
Bonjour mgnthe54,

Avec JQuery UI et le datepicker (ton second exemple), tu peux formater la date qui va apparaître dans le input après la sélection dans le calendrier.

Voir https://jqueryui.com/datepicker/#date-formats

Ensuite, il y a aussi la possibilité de limiter le calendrier à l'année en cours par exemple avec ceci https://jqueryui.com/datepicker/#min-max

C'est sûr que l'année reste visible dans le calendrier lui-même, alors ce n'est pas la solution parfaite.

Je vois cependant que l'année en haut du calendrier est dans un span avec la class ui-datepicker-year, alors tu pourrais cacher cet élément en CSS avec un simple display:none.

Je n'ai pas le temps d'effectuer des recherches sur d'autres solutions.
Meilleure solution
Merci je vais regarder le lien (demain):
https://jqueryui.com/datepicker/#date-formats

Pour limiter les années à l'année en cours (par exemple j'avais vu le post sur le sujet avec un truc de ce genre :

<label for="start">Start date:</label>

<input type="date" id="start" name="trip-start"
       value="2022-11-14"
      [b] min="2022-01-01" max="2022-12-31"[/b]>

Mais comme tu l'as toi même indiqué l'année reste visible cela peut être perturbant pour l'utilisateur final qui risque de penser qu'il fait un réglage pour l'année en cours et pas pour toutes les années...

Et j'ai aussi regarder vite fait ta suggestion de cacher en CSS l'année :
.ui-datepicker-year{
display:none;
}

cela fonctionne sur le calendrier il n'y a plus l'année mais lorsque l'on sélectionne une date le champ input affiche mm/jj/YYYY (il faudrait d'ailleurs que je regarde comment remettre la date en format Français et voir si on peut cacher aussi dans le champ input l'année..
Merci pour toutes ces pistes si tu en as d'autres n'hésite pas!
Merci encore
Bonjour je viens de regarder le lien :
https://jqueryui.com/datepicker/#date-formats
qui m'a été d'un grand secours, bon la mise en Français complète du calendrier avec :
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );

j'ai pas réussi et il semble que je ne soit pas le seul si quelqu'un a réussi..
Mais il parait qu'il faut faire comme ceci : insertion du fichier datepicker-fr.js)

<script src="js/jquery-ui.min.js"></script>
<script src="js/datepicker-fr.js"></script>
<script type="text/javascript">
$( function() {
     $.datepicker.setDefaults($.datepicker.regional["fr"]);
     $( "#datepicker" ).datepicker();
} );
</script>


du coup j'ai triché un peu en faisant comme ceci (et cela me permet en + de ne pas avoir l'année d'affiché):

  $( function() {
	
    $( "#datepicker" ).datepicker({monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
				   monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
				   dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
				   dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
				   dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
				   dateFormat: 'dd-mm',
				   closeText: 'Fermer',
				   prevText: 'Précédent',
				   nextText: 'Suivant',
				   firstDay : 1,
				   	
				   });
    
  } );

Et du coup dans mon champ l'année n'apparait plus!
Il me reste une dernière chose sur laquelle je sèche un peu c'est remplir le champ input avec une date (dd-mm) par défaut (on ouvre la page web et le champ est rempli par une date contenu en bdd..
J'ai essayé le paramètre defaultday mais celui-ci agit sur la calendrier et pas sur le champ input...

Bon pour remplir le champ par défaut on peut (à moins qu'il y ait mieux via directement datepicker)

  <p><center>Date: <input type="maDate" id="datepicker" style="width:4em"></center></p>   
  <script>
document.getElementById("datepicker").value = "<?php echo $dateDebutPrimaire; ?>"; 
</script>

Et du coup même plus besoin de defaultdate car cela positionne aussi le calendrier sur cette date!
Mon dernier soucis (pour le moment) c'est que l'utilisateur peut saisir au clavier dans l'input n'importe quel chiffre du genre 37-25 (drôle de jour et de mois) il n'y a aucun contrôle...
Du coup je cherche un moyen de verrouiller l'entrée de données autre que par le calendrier...

Merci
Modifié par mgnthe54 (16 Nov 2022 - 18:08)
Administrateur
Bonjour,

je te conseille de valider rapidement en JS la date saisie avant envoi au serveur, et bien entendu valider avec soin côté serveur les dates du genre "); DROP... Smiley murf
Et de laisser l'utilisateur saisir des chiffres s'il le souhaite : sur mobile quand il faut scroller dans tous les sens pour visualiser le datepicker, pouvoir saisir au clavier c'est bien utile. Sans compter les utilisateurs du clavier quand le datepicker n'est pas complètement accessible...

Comme validation, un nombre entre 1 et 31 et l'autre entre 1 et 12 c'est déjà un bon écrémage (côté client je le répète). Et des messages d'erreur clairs, avec un exemple de saisie correcte Smiley biggrin
Merci
Ce calendrier est pour une page de paramétrage de l'administrateur du site du coup pas trop de soucis d'affichage sur smartphone.

J'ai en attendant trouver éventuellement mieux "réglé" le problème comme ceci :
  <p><center>Date: <input type="maDate" id="datepicker" disabled="disabled"></center></p>

donc on ne peut plus écrire de texte dans ce champ!
Et j'ai activer le bouton du calendrier avec le paramètre showOn: "button" .
Du coup in ne reste plus que le calendrier sachant qu'on navigue au maximum sur 12 mois puisque l'année est ignorée.
Mais à chaque pas une nouvelle question... du coup je cherche comment remplacer les 3 points du bouton de datepicker par soit un texte, soit une image...

https://forum.alsacreations.com/topic-5-90108-1-Peut-on-donner-un-nom-au-bouton-de-datepickerY.html

Merci encore
Modifié par mgnthe54 (17 Nov 2022 - 20:31)
Modérateur
Bonjour mgnthe54,

Je ne connais pas le contexte exact où tu souhaites utiliser un champ date sans l'année et un calendrier interactif avec les journées de la semaine (lundi, mardi, mercredi...), mais il faut avoir conscience que l'année est très importante dans un tel calendrier. Par exemple, le 1 janvier 2023 sera un dimanche alors que le 1 janvier 2022 était un samedi. Si tu caches l'année, ça peut porter à confusion si l'administrateur veut configurer une date pour janvier 2023, alors qu'il est en décembre 2022.

Peut-être vaudrait-il mieux que tu utilises deux menus déroulants?

- Mois (1 à 12)
- Jour (1 à 31)

et que tu valides le tout, car ce n'est pas tous les mois qui ont 31 jours.

Tu confirmes que l'année n'a pas d'importance dans ton contexte?
Sujet clos
Aller à