如何通过给出两个日期来限制 jquery datepicker 的日期范围？

Posted 2023-05-07

【中文标题】如何通过给出两个日期来限制 jquery datepicker 的日期范围？

【英文标题】：How to restrict date range of a jquery datepicker by giving two dates?

【发布时间】：2011-05-31 02:08:18

【问题描述】：

我有两个日期存储在 db 中，并使用 $.ajax() 选择它，我需要显示从 db 中选择的日期之间的 datepicker 值。

这是我的代码。但它不能正常工作

function setDatePickerSettings(isFisc) 
        var fSDate, fEDate;
        $.ajax(
            type: "POST",
            url: '../Asset/Handlers/AjaxGetData.ashx?fisc=1',
            success: function(data) 
                alert(data);
                var res = data.split("--");//data will be 4/4/2010 12:00:00--5/4/2011 12:00:00 
                var sDate = res[0].split(getSeparator(res[0]));
                alert("Separator " + getSeparator(res[1]) + " Starts " + sDate);
                var eDate = res[1].split(getSeparator(res[1]));
                alert("End " + eDate);
                alert("sub " + sDate[0]);
                fSDate = new Date(sDate[2].substring(0, 4), sDate[0], sDate[1]);
                alert("Starts " + fSDate.substring(0, 4));
                fEDate = new Date(eDate[2].substring(0, 4), eDate[0], eDate[1]);
                alert("eND " + fEDate.toString());

            

        );
          var dtSettings = 
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
        buttonImage: clientURL + 'images/calendar.png',
        buttonImageOnly: true,
        showStatus: true,
        showOtherMonths: false,
        dateFormat: 'dd/mm/yy',
        minDate:fSDate, //assigning startdate
        maxDate:fEDate //assigning enddate
    ;

    return dtSettings;

请提供一些解决方案。我需要日期时间选择器，它需要该范围之间的值。在此先感谢

【参考方案1】：

您的 minDate/maxDate 语法错误。 You can read the documentation on the jQuery UI website where the demo is。我建议您看一下它以根据您的具体情况进行调整。它看起来像这样：

$( ".selector" ).datepicker( minDate: new Date(2007, 1 - 1, 1) );

或

以下内容将使您无法选择今天之前的任何内容。

$( ".selector" ).datepicker( minDate: 0 );

这会让你在明天之前不能选择任何东西

$( ".selector" ).datepicker( maxDate: 1 );

编辑：这是您插入自己的日期的方式，但我在让 dateFormat 正常工作时遇到问题，正如您所见，我指定了 dateFormat，但我实际输入的格式忽略了 dateformat。

$("#txtDateStart").datepicker(dateFormat:'mm/dd/yy', minDate: new Date(2010,11,12) );

【讨论】：

那么我怎样才能将最小值设为 2004-4-1，将最大值设为 2008-2-12？

是否可以设置 minDate / maxDate 默认值？我试过$.fn.datepicker.defaults.minDate = new Date(2017, 1, 1); 和$.fn.datepicker.defaults.minDate = -20，但似乎都不起作用

@tgordon18 不，如果您使用 Chrome 调试控制台，您将看到没有 $.fn.datepicker.defaults，更重要的是，为此设置了 API，以便您创建实例。 $.fn.datepicker(options...)。如果你想设置最小和最大日期，你必须将其作为选项传递给每个实例，据我从源代码中可以看到。

我通过将日期格式作为选项集中的最后一项来解决这个问题，例如 dateFormat: "dd/mm/yy") - 完整的解决方案在我下面的答案中。

@TheMuffinMan 我认为你写的“明天之前”是不正确的？但无论如何，我确实发现这个答案非常有帮助。

【参考方案2】：

我知道这是一篇古老的帖子，但@TheMuffinMan 提出的关于无法使日期格式与日期限制选项一起使用的错误是真实存在的，并且仅在选项与他的内联时才会出现例子。

如果您必须使用这种格式，并且如果有人仍然感兴趣，解决方法是将日期格式选项放在集合中的最后一个选项。例如，下面的代码对我来说完美无缺。

var minDate = -20;
var maxDate = "+1M +10D" 

$('body').on('focus',".datepicker", function()
    $(this).datepicker( minDate: minDate, maxDate: maxDate ,dateFormat: "dd/mm/yy");
);

我希望它可以帮助别人。

【参考方案3】：

这对我有用。

$('#date-time-picker').datepicker(
    format: 'YYYY-MM-DD',
    useCurrent: false,
    showClose: true,
    minDate: '2018-02-01',
    maxDate: '2018-03-15',
)

【参考方案4】：

我用了这个，我得到了输出。谢谢大家

 function setFiscDatePickerSettings() 

        var fSDate, fEDate, sDate, fEDate;
        var dtSettings;
        sDate = document.getElementById("<%=hdfFiscStart.ClientID %>").value.split(getSeparator(document.getElementById("<%=hdfFiscStart.ClientID %>").value));
        eDate = document.getElementById("<%=hdfFiscEnd.ClientID %>").value.split(getSeparator(document.getElementById("<%=hdfFiscEnd.ClientID %>").value));
        fSDate = new Date(sDate[2].substring(0, 4), sDate[0] - 1, sDate[1]);
        fEDate = new Date(eDate[2].substring(0, 4), eDate[0] - 1, eDate[1]);
        dtSettings = 
            changeMonth: true,
            changeYear: true,
            showOn: 'both',
            buttonImage: clientURL + 'images/calendar.png',
            buttonImageOnly: true,
            showStatus: true,
            showOtherMonths: false,
            dateFormat: 'dd/mm/yy',
            minDate: fSDate, maxDate: fEDate
        ;

        return dtSettings;
    


    function bindFiscalDatePicker() 
        var inputDt = $("input.datepicker_fisc");
        inputDt.addClass("numbers_only");
        inputDt.addClass("allow_special");
        inputDt.attr("symbolcodes", "/");
        inputDt.datepicker(setFiscDatePickerSettings());