Archives de Tag: DatePicker

Datepicker – Mois et année uniquement

La suite de ce billet sur les Calendrier en jQueryvia DatePicker.

Voici comment avoir avec jQuery-ui un calendrier qui n’affiche que les mois et les années.

$(".date").datepicker({
    dateFormat: 'mm/yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showOn: "button",
    buttonImage: "/Content/images/calendar.png",
    buttonImageOnly: true,
    onClose: function (dateText, inst) {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1));
    },
    beforeShow: function (input, inst) {
        if ((datestr = $(this).val()).length > 0) {
            actDate = datestr.split('/');
            year = actDate[1];
            month = actDate[0] - 1;
            $(this).datepicker('option', 'defaultDate', new Date(year, month));
            $(this).datepicker('setDate', new Date(year, month));
        }
    }
});
$(".date").focus(function () {
    $(".ui-datepicker-calendar").hide();
    $("#ui-datepicker-div").position({
        my: "center top",
        at: "center bottom",
        of: $(this)
    });
});

Et voici le résultat :

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. Lire la suite