Bonjour, j'ai un champ input dont j'ai besoin de forcer l'utilisateur à utiliser le format dd-mm-aaaa 

J'ai bien vu l'option pattern avec un truc de genre regex

https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/pattern

j'ai mis ceci :

<input type="text" id="datepickerDebut" name="datepicker" minlength="10" maxlength="10"value ="<?php echo $Date; ?>"pattern="[0-9]{2}-[0-9]{2}-[0-9]{4}"required>

j'oblige bien l'utilisateur à mettre de les - entre le jour et le mois et le mois et l'année... (Enfin s'il veut bien ne pas entrer que des chiffres) car avec mon pattern je peux mettre 10 chiffres sans aucun - ou même 10 -) mais il n'accepte que cela mais pas par couple de 2 chiffres - 2 chiffres- 4 chiffres...

J'aurais voulu limiter aux dates possibles c'est à dire :

les jours de 1 à 31

les mois de 1 à 12

et les années ben éventuellement sur une plage d'année pas par exemple 2573... ni 1815

Merci

Bonjour,

un input de type date, te limitera déjà dans les possibilités

Oui mais j'utilise un input text car il est associé à un calendrier animé (les pages défilent) de sélection de date cela donne un truc de ce genre:

Merci

Celle-ci:

						<!-- 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>	

Pour la partie animation.

Merci

J'ai quand même tester le type date a tou hasard mais cela rentre visuellement en conflit avec mon jquery qui lui aussi gère un calendrier...

Si quelqu'un as une autre idée!

Merci

Bonjour,

>> j'ai un champ input dont j'ai besoin de forcer l'utilisateur à utiliser le format dd-mm-aaaa 

C'est ton jQuery qui génère la date, c'est de ce coté que tu dois regarder pour en modifier le format.

        $(function () {
            $("#datepicker").datepicker();
            $("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy");
        });

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

Je déplace en JS.

Déplacement vers un forum plus approprié

Le sujet est déplacé de la section HTML/CSS vers la section Javascript

Bonjour, oui et non effectivement je gère bien dans les options le format :

$('#datepickerDebut').datepicker(datepickerOptions2);

<div class="formGroup row aln-center">       <!-- Début de la class de la date du jour à modifier -->

										

										

										<label for="datepickerDebut">

<?php 										echo "Jour à modifier : &nbsp;"; 

?> 											

										</label>

									   

										<input type="text" id="datepickerDebut" name="datepicker" minlength="10" maxlength="10" value ="<?php echo $Date; ?>" required>

									   



										<script>

											document.getElementById("datepickerDebut").value = "<?php echo $Date?>";

										</script>



									</div>      <!-- Fin de la class de la date du jour à modifier-->

var datepickerOptions2 = {
  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-yy',
  prevText: 'Précédent',
  nextText: 'Suivant',
  firstDay: 1,
  showOn: "both",
  buttonText: "Choisir la date",
  buttonImage: "/images/datepicker3.gif",
  maxDate:"date()"

et lors de la validation le contrôle est bien effectué mais si tu rentres par exemple --1234-499 et bien cela passe car il y a les 10 caractères, des chiffres et le signe -

tu peux si tu veux aller voir ma page de test : (il n'y a rien derrière)

http://gilles54.no-ip.info:9180/fonctions/test.php

Merci

Merci

Bonsoir, si tu tiens vraiment à utiliser un pattern voici ci que je propose :

<input type="text" id="datepickerDebut" name="datepicker" minlength="10" maxlength="10"
value="17-02-2024" class="hasDatepicker" required="" 
pattern="[0-9]{2}-[0-9]{2}-[0-9]{4}" 
title="Le format à respecter est dd-mm-aaaa">

mais des string comme 17-02-2024 (ce que ne permet pas la génération via le datepicker) ou 41-25-3561 est possible.

Je rajouterais l'attribut disabled au champ pour ne pas permettre la saisie texte directement dans le champ et forcer l'usage du datepicker.

https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/disabled

Bien évidement cela n'est qu'un leurre de sécurité, car en inspectant le code avec les outils de développement on peut supprimer tous les attributs que tu as ajoutés.

En tout état de cause la saisie utilisateur DOIT être vérifiée coté serveur, et si pas valide renvoyer un message d'erreur à l'utilisateur.

Oui jusqu'à présent j'utilisais l'option readonly ce qui faisait que l'on passait directement par le calendrier et le format était nickel...

Mais en ayant rajouté 

value ="<?php echo $Date; ?>"  cela prérempli la date du jour (d'ailleurs je viens de voir que je le fais en HTML et javascript dans mon code au dessus...)

Et si on valide sans avoir vérifié c'est la cata puisque le format est bon le serveur va l'accepter mais ce n'est peut être pas ce qu'on voulait du coup je voudrais contrôler côté navigateur le format (sans préremplir la date) avant de le faire cote serveur et ne pas préremplir le champ de la date mais obliger à y mettre quelque chose si possible au bon format...

J'espère avoir été clair...

Merci

<fieldset>

    <label for="datepickerDebut">
<?php 		echo "Date du jour à modifier : &nbsp;"; 

?> 											

    </label>
									   
    <input type="text" id="datepickerDebut" name="datepicker" minlength="10" maxlength="10" value ="<?php echo "dd-mm-yyyy"?>" pattern="[0-9]{2}-[0-9]{2}-[0-9]{4}" required >

									  
																	

</fieldset>

PS: j'ai teste le pattern

il n'empêche pas l'écriture de par exemple 1111111111 ou ---------- entre autre bref il semble inopérant...

Je suppose que c'est du coup le format dans datepicker qui prend la main du coup j'ai tenté une regex conne ceci:

var datepickerOptions2 = {
  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: '^(0[1-9]|[12][0-9]|3[01])[\/](0[1-9]|1[012])[\/](20|20)\d\d$',
  prevText: 'Précédent',
  nextText: 'Suivant',
  firstDay: 1,
  showOn: "both",
  buttonText: "Choisir la date",
  buttonImage: "/images/datepicker3.gif",
  maxDate:"date()"

};

sans plus de succès...

Merci

En fait plus j'y réfléchis et plus je trouve (ou plutôt ne trouve pas ) que l'idéal serais un disabled ou readonly dans le code de l'imput text mais avec un required qui fonctionne ce qui n'est pas le cas avec l'une ou l'autre de ses 2 options...

Merci

-
Edité par GillesMangin-Voirin 11 février 2024 à 18:31:41

Bonjour, j'ai trouvé un contrôle

<input type="text" id="datepickerDebut" name="datepicker" minlength="10" maxlength="10" value ="<?php echo "dd-mm-yyyy"?>" 

title="Le format à respecter est dd-mm-aaaa" 

pattern="(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})" >

en HTML 5 avec pattern et le regex suivante:

Merci

issu de ce lien :

https://www.gekkode.com/developpement/expression-reguliere-pour-valider-une-date/

-
Edité par GillesMangin-Voirin 18 février 2024 à 16:48:23