jQuery 日期选择器中的 maxDate 选项

maxDate option in datepicker

提问by Nandu

I have a Jquery UI datepicker like this.

我有一个像这样的 Jquery UI 日期选择器。

I can only select month and year from the datepicker.
code:

我只能从日期选择器中选择月份和年份。
代码：

$('#datepicker').datepicker({
     changeMonth: true,
     changeYear: true,
     showButtonPanel: true,
     dateFormat: 'M yy',
     maxDate: '0',                      
     onClose: function() {
          var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
          var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
          $(this).datepicker('setDate', new Date(iYear, iMonth, 1));                              
    },
     beforeShow: function(input, inst) {
          $(inst.dpDiv).addClass('calendar-off');                             
     }
});

If I set maxDate: '0'the maximum month and year I can select is the current month and current year.
I want to set the maximum month and year using jquery. For a normal datepicker with date,month,year, first I remove this maxDate: '0'code and I used the following code to set the maximum date

如果我设置 maxDate: '0'最大月份和年份，我可以选择当前月份和当前年份。
我想使用 jquery 设置最大月份和年份。对于带有日期、月份、年份的普通日期选择器，首先我删除此maxDate: '0'代码，并使用以下代码设置最大日期

var maximumDate = '07-15-2013';
$("#datepicker" ).datepicker( "option", "maxDate", maximumDate);

How can i set the maximum date in month and year picker? The above code is not working in this case.Please give me your suggestions.

如何在月份和年份选择器中设置最大日期？上面的代码在这种情况下不起作用。请给我您的建议。

回答by Nandu

Tried the following code.It works fine for me.

尝试了以下代码。它对我来说很好用。

    var date = new Date("2013-07-15");
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();
    $("#datepicker" ).datepicker( "option", "maxDate", new Date(currentYear, currentMonth, currentDate));

Example fiddle I created:FIDDLE

我创建的小提琴示例：FIDDLE

回答by Amol

Try This to choose max/min datesfrom month and year datepicker.

试试这个从月份和年份日期选择器中选择最大/最小日期。

See this fiddle for the full solution: Month/Year Picker @ JSFiddle

有关完整解决方案，请参阅此小提琴：Month/Year Picker @ JSFiddle

var searchMinDate = "-2y";
var searchMaxDate = "-1m";
if ((new Date()).getDate() <= 5) {
    searchMaxDate = "-2m";
}
$("#txtFrom").datepicker({
    dateFormat: "M yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showAnim: "",
    minDate: searchMinDate,
    maxDate: searchMaxDate,
    showButtonPanel: true,
    beforeShow: function (input, inst) {
        if ((datestr = $("#txtFrom").val()).length > 0) {
            var year = datestr.substring(datestr.length - 4, datestr.length);
            var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), "#txtFrom").datepicker('option', 'monthNamesShort'));
        $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
                $("#txtFrom").datepicker('setDate', new Date(year, month, 1));
            }
        },
        onClose: function (input, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
            $("#txtFrom").datepicker('setDate', new Date(year, month, 1));
            var to = $("#txtTo").val();
            $("#txtTo").datepicker('option', 'minDate', new Date(year, month, 1));
            if (to.length > 0) {
                var toyear = to.substring(to.length - 4, to.length);
                var tomonth = jQuery.inArray(to.substring(0, to.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
                $("#txtTo").datepicker('option', 'defaultDate', new Date(toyear, tomonth, 1));
                $("#txtTo").datepicker('setDate', new Date(toyear, tomonth, 1));
            }
        }
    });
    $("#txtTo").datepicker({
        dateFormat: "M yy",
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        showAnim: "",
        minDate: searchMinDate,
        maxDate: searchMaxDate,
        showButtonPanel: true,
        beforeShow: function (input, inst) {
            if ((datestr = $("#txtTo").val()).length > 0) {
                var year = datestr.substring(datestr.length - 4, datestr.length);
                var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
                $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
                $("#txtTo").datepicker('setDate', new Date(year, month, 1));
            }
        },
        onClose: function (input, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
            $("#txtTo").datepicker('setDate', new Date(year, month, 1));
            var from = $("#txtFrom").val();
            $("#txtFrom").datepicker('option', 'maxDate', new Date(year, month, 1));
            if (from.length > 0) {
                var fryear = from.substring(from.length - 4, from.length);
                var frmonth = jQuery.inArray(from.substring(0, from.length - 5), $("#txtFrom").datepicker('option', 'monthNamesShort'));
                $("#txtFrom").datepicker('option', 'defaultDate', new Date(fryear, frmonth, 1));
                $("#txtFrom").datepicker('setDate', new Date(fryear, frmonth, 1));
            }

        }
    });

Also add this to a style block as mentioned above:

如上所述，还将其添加到样式块中：

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