这是我想到的。它隐藏了日历，而不需要额外的样式块，并添加了一个清除按钮，以解决单击输入后无法清除值的问题。同样适用于同一页面上的多个月份选择器。

HTML:

<input type='text' class='monthpicker'>

JavaScript:

$(".monthpicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "yy-mm",
    showButtonPanel: true,
    currentText: "This Month",
    onChangeMonthYear: function (year, month, inst) {
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1)));
    },
    onClose: function(dateText, inst) {
        var month = $(".ui-datepicker-month :selected").val();
        var year = $(".ui-datepicker-year :selected").val();
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
    }
}).focus(function () {
    $(".ui-datepicker-calendar").hide();
}).after(
    $("<a href='javascript: void(0);'>clear</a>").click(function() {
        $(this).prev().val('');
    })
);

如果有人想也为多个日历它不是很难添加这个功能到jquery ui。 简化搜索功能:

x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t)&&C==0?c?f:n:"")+(

把这个加在x前面

var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';}

搜索

<table class="ui-datepicker-calendar

并将其替换为

<table class="ui-datepicker-calendar'+accl+'

也可以搜索

this._defaults={

将其替换为

this._defaults={justMonth:false,

对于CSS，你应该使用:

.ui-datepicker table.ui-datepicker-just_month{
    display: none;
}

所有这些都完成后，只需转到所需的datepicker init函数并提供设置变量

$('#txt_month_chart_view').datepicker({
    changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        justMonth: true,
        create: function(input, inst) {
            $(".ui-datepicker table").addClass("badbad");
        },
        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));
        }
});

justMonth: true是这里的关键:)

对于月份选择器，使用jQuery v1.7.2

我有以下javascript正在做的事情

$l("[id$=txtDtPicker]").monthpicker({
    showOn: "both",
    buttonImage: "../../images/Calendar.png",
    buttonImageOnly: true,
    // Default is 'mm/yyyy' and separator char is not mandatory
    pattern: 'yyyymm',
    monthNames: [
        'Jan',
        'Fev',
        'Mar',
        'Abr',
        'Mai',
        'Jun',
        'Jul',
        'Ago',
        'Set',
        'Out',
        'Nov',
        'Dez'
    ]
});

的事: http://www.mattkruse.com/javascript/calendarpopup/

选择月-选择示例

我还需要一个月份选择器。我做了一个简单的一年在标题和3行4个月下面。jQuery简单的月-年选择器。

再添加一个简单的解决方案

 $(function() {
    $('.monthYearPicker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'M yy'
    }).focus(function() {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        $('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
        });
    });
});

http://jsfiddle.net/tmnasim/JLydp/ 特点:

只显示月/年 仅在单击完成按钮时将月年值添加到输入框 当点击“完成”时，没有“重新打开”行为 ------------------------------------ 另一个解决方案，工作很好，日期和月在同一页:(也避免了在IE中多次点击前一个按钮的错误，这可能发生，如果我们使用焦点功能) JS小提琴link