我使用jQuery日期选择器在我的应用程序上显示日历。我想知道我是否可以使用它来显示月和年(2010年5月)而不是日历?


当前回答

标记回答工作!! 但不是在我的情况下,有一个以上的datepicker,只想实现在特定的datepicker

所以我使用实例的dp和找到datepicker Div 并添加hide类

这里的代码

<style>
    .hide-day-calender .ui-datepicker-calendar{
        display:none;
    }
</style>

<script>
        $('#dpMonthYear').datepicker({ 
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            onClose: function (dateText, inst) { 
                $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            },
            beforeShow: function (elem,dp) {
                $(dp.dpDiv).addClass('hide-day-calender'); //here a change
            }
        });
</script>

注意:你不能瞄准.ui-datepicker-calendar并设置css,因为它会在选择/更改时不断呈现

其他回答

在jQueryUI.com上搜索datepicker后,以下是我对你问题的结论和答案。

首先,我想对你的问题说不。你不能只使用jQueryUI datepicker来选择月份和年份。不支持。它没有回调函数。

但是你可以通过使用css来隐藏日期等,让它只显示月份和年份。我认为这没有意义因为你需要点击日期来选择日期。

我只能说你得用另一个约会工具。就像罗杰建议的那样。

我使用了这段代码,并完美地工作

$(".your_input_class").datepicker({
    dateFormat: 'MM yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    startView: "months", 
    minViewMode: "months"
});

我知道这个回复有点晚,但几天前我也遇到了同样的问题,我已经有了一个很好的解决方案。 首先,我在这里找到了这个很棒的日期选择器

然后我刚刚更新了CSS类(jquery.calendarPicker.css),它像这样随示例而来:

.calMonth {
  /*border-bottom: 1px dashed #666;
  padding-bottom: 5px;
  margin-bottom: 5px;*/
}

.calDay 
{
    display:none;
}

当你改变任何东西时,插件会触发一个事件DateChanged,所以你没有点击某一天并不重要(它适合作为年和月选择器)

希望能有所帮助!

如果您正在寻找月份选择器,请尝试jquery.mtz.monthpicker

这对我很有效。

options = {
    pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
    selectedYear: 2010,
    startYear: 2008,
    finalYear: 2012,
    monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

$('#custom_widget').monthpicker(options);

标记回答工作!! 但不是在我的情况下,有一个以上的datepicker,只想实现在特定的datepicker

所以我使用实例的dp和找到datepicker Div 并添加hide类

这里的代码

<style>
    .hide-day-calender .ui-datepicker-calendar{
        display:none;
    }
</style>

<script>
        $('#dpMonthYear').datepicker({ 
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            onClose: function (dateText, inst) { 
                $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            },
            beforeShow: function (elem,dp) {
                $(dp.dpDiv).addClass('hide-day-calender'); //here a change
            }
        });
</script>

注意:你不能瞄准.ui-datepicker-calendar并设置css,因为它会在选择/更改时不断呈现