Archives de Tag: Mois

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 :

Publicités