Datepicker en Jquery
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/
