Calendrier en jQuery – DatePicker

Tous d’abord récupérer (si ce n’est pas déjà fait) le jquery-ui et le css qui vous fait envie sur le site officiel.

Vous n’avez plus qu’à les importer.

<script src="../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<link href="../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />

Pendant qu’on y est, on récupère également la traduction française du calendrier ici. Et on l’importe

<script src="../Scripts/jquery.ui.datepicker-fr.js" type="text/javascript"></script>

Ensuite on aura besoin d’une textbox pour saisir la date et l’afficher.

<input type="text" class="date"/>

Et enfin de script pour relier la textbox avec le calendrier.

<script>
$(function () {
    $('.date').datepicker({ dateFormat: "dd/mm/yy" });
});
</script>

Voilà c’est aussi simple, et comme bonus, voici la même chose en intégrale et en plus classe.