日期选择器中的 maxDate 选项

Posted 2023-05-07

【中文标题】日期选择器中的 maxDate 选项

【英文标题】：maxDate option in datepicker

【发布时间】：2013-07-12 21:35:34

【问题描述】：

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

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

$('#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');                             
     
);

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

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

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

【问题讨论】：

maxDate 字符串必须采用 dateFormat 选项定义的格式。检查您的 dateFormat 选项或改用日期对象：var maximumDate = new Date(2013,7,15);.

@pipo("#datepicker" ).datepicker("option", "maxDate","7/15/2013");此代码适用于普通日期选择器。但不适用于月份和年份选择器。

@pipo 正如你所说，我尝试了很多，终于找到了答案。谢谢 pipo

【参考方案1】：

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

    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));

我创建的小提琴示例：FIDDLE

【参考方案2】：

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

完整解决方案请参见此小提琴：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));
            

        
    );

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

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