Question

我正在使用jquery Datepicker UI。我需要使用此UI仅显示月份和年份。我使用以下代码得到了它：

$(function() {
         $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yy-mm',
        onChangeMonthYear: 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));

        }
    });
});

HTML：

<input type='text' id='date' name='eattdate' class='date-picker' value='".$date."' style='width:105px;'>

这很好，它默认显示当前月份和年份。但我想选择月份和年份。

Answer 1

首先，我相信你错过了日历的隐藏（我猜你想要那个，因为你只处理几个月和几年，但我可能错了）。所以，如果这确实是你的意图，请使用：

.ui-datepicker-calendar {
    display: none;
}

在CSS文件中。

现在，对于未在之前选择的日期中打开的日期选择器，您可以引入beforeShow，如下所示：

$(function() {
     $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yy-mm',

        onChangeMonthYear: 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() {
            var dateText = $(this).val();
            var isPopulated = dateText.length > 0;

            if (isPopulated) {
                var selectedDate = $.datepicker.parseDate("yy-mm-dd", dateText + "-01");

                $(this).datepicker("option", "defaultDate", selectedDate);
                $(this).datepicker("setDate", selectedDate);
                $(this).datepicker("refresh");
            }
        }
    });
});

我相信这应该能让你得到你想要的东西。

Answer 2

试试这个：

defaultDate: new Date()

JQuery Datepicker仅适用于月份和年份

2 个答案: