Jquery Datepicker抑制年份

时间:2013-07-08 03:29:49

标签: jquery

当您在文本框中单击时,我会弹出一个日历。我已经处理了一年,我不想在日期选择日历中显示一年。你能建议吗?在jsbin中有代码。

http://jsbin.com/uwohez/1

$(document).ready(function(){

    $(".monthPicker").datepicker({ 
        dateFormat: 'mm',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: 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).val($.datepicker.formatDate('m', new Date(year, month, 1)));
        }
    });

    $(".monthPicker").focus(function () {
        $(".ui-datepicker-calendar").hide();
        $("#ui-datepicker-div").position({
            my: "center top",
            at: "center bottom",
            of: $(this)
        });    
    });
});

1 个答案:

答案 0 :(得分:0)

我知道这是一个老问题,但我想我刚刚完成了你想要做的事情(http://jsfiddle.net/robattfield/M5PHP/)。因为我看到我必须提供带有jsfiddle链接的代码,所以代码是:

表单HTML代码

<form method="post" action="#">
    <fieldset>
        <legend>Select a month:</legend>
        <label for="month_datepicker">Select month: </label>
        <input name="month" id="month_datepicker" />
        <button id="submit_month" type="submit" name="submit_month" class="button-turquoise">Show Daily Data</button>
    </fieldset>
</form>

CSS代码

.MonthDatePicker .ui-datepicker-year
{
    display:none;   
}
.HideTodayButton .ui-datepicker-buttonpane .ui-datepicker-current
{
    visibility:hidden;
}

.hide-calendar .ui-datepicker-calendar
{
    display:none!important;
    visibility:hidden!important
}

JQuery / JS代码

$("#month_datepicker").datepicker({
        changeMonth: true,
        showButtonPanel: true,
        dateFormat: "M",
        beforeShow: function (e, t) {
            $(this).datepicker("hide");
            $("#ui-datepicker-div").addClass("hide-calendar");
        $("#ui-datepicker-div").addClass('MonthDatePicker');
        $("#ui-datepicker-div").addClass('HideTodayButton');
        },
    onClose: function(dateText, inst){
        var n = Math.abs($("#ui-datepicker-div .ui-datepicker-month :selected").val() - 1) + 2;
        $(this).datepicker("setDate", new Date(null, n, null));
    }
});

您的要求可能略有不同,但我认为这可能会有所帮助。如果有什么不妥,请随时纠正我......