HTML 5 inclue les types « date » pour les formulaires. Mais comme vous l’avez peut-être remarqué, ça ne fonctionne pas encore avec tous les Navigateurs.

Alors une alternative est de passer par le datepicker de Jquery.

 

Ajouter dans la section « head » de votre page:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function () {
$(".datepick").datepicker({
dateFormat: 'dd/mm/yy',
dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
firstDay: 1 ,
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']});
});
</script>

Puis dans votre formulaire HTML:

echo "Entrez la date de début :";
echo "<input type=text size=10 name=date_de_debut  id=date_de_debut value=\"$date_de_debut\" class=datepick />";

 

Vous pouvez TESTER ICI

 

Page HTML complète:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function () {
$(".datepick").datepicker({
dateFormat: 'dd/mm/yy',
dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
firstDay: 1 ,
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']});
});
</script>
</head>

<body>

<form>
<p>Entrez la date</p>
<input type =text name=date_debut id=date_debut class=datepick>
</form>

</body>

</html>

 

Et vous trouverez toutes les options possibles ( par exemple brider à une date minimum ou une date maximum ), ici:

https://api.jqueryui.com/datepicker/

Leave a Reply

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

Blue Captcha Image
Refresh

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.