jQuery datepicker 防止过去的日期答案

【问题标题】：jQuery datepicker to prevent past datejQuery datepicker 防止过去的日期
【发布时间】：2010-12-19 16:11:44
【问题描述】：

如何在 jQuery datepicker 上禁用过去的日期？我寻找了选项，但似乎没有找到任何表明能够禁用过去日期的东西。

更新：感谢大家的快速回复。我试过了，但没有运气。日子仍然没有像我预期的那样变灰，并且仍然接受选择的过去日期。

我试过了：

$('#datepicker').datepicker({ minDate: '0' });

没用。

我试过了：

$('#datepicker').datepicker({ minDate: new Date() });

还是不行。

它可以很好地显示日历小部件。它只是不会变灰或阻止过去几天的输入。我过去曾尝试过 minDate 和 maxDate 但没有运气，所以我认为它一定不是它们。

【问题讨论】：

标签： javascript jquery jquery-ui date datepicker

【解决方案1】：

试试这个：

$("#datepicker").datepicker({ minDate: 0 });

删除 0 中的引号。

【讨论】：

@BWDesign 比我晚一年半回答 ;)
你救了我我的朋友。

【解决方案2】：

您只需要指定一个最短日期 - 将其设置为 0 意味着最短日期是从今天（即今天）开始的 0 天。您可以改为传递字符串'0d'（默认单位为天）。

$(function () {
    $('#date').datepicker({ minDate: 0 });
});

【讨论】：

【解决方案3】：

如果您正在处理以前绑定的日期选择器，那么设置

$("#datepicker").datepicker({ minDate: 0 });

不会工作。该语法仅在您创建小部件时适用。

要为绑定日期选择器设置最小日期，请使用以下命令：

$("#datePicker").datepicker("option", "minDate", 0);

【讨论】：

谢谢。我浪费了很长时间才找到这个解决方案，这解决了我的问题。

【解决方案4】：

删除0 周围的引号，它将起作用。

工作代码片段：

// set minDate to 0 for today's date
$('#datepicker').datepicker({ minDate: 0 });

body {
    font-size: 12px; /* just so that it doesn't default to 16px (which is kinda huge) */
}

<!-- load jQuery and jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<!-- load jQuery UI CSS theme -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- the datepicker input -->
<input type='text' id='datepicker' placeholder='Select date' />

【讨论】：

任何解释为什么需要逗号？我可以删除它，一切仍然正常。是否有一些浏览器需要单个属性对象的逗号？
只有在使用多个选项时才需要逗号，例如$('#datepicker').datepicker({ minDate: 0, maxDate: "+1M +10D", dateFormat: 'yy-mm-dd' });最后一个选项后不需要逗号
您正在向该方法发送一个对象。最后一个值的逗号不正确。
逗号不需要并且会在某些浏览器中破坏您的代码（逗号已删除）

【解决方案5】：

使用 minDate 选项设置可能的最短日期。 http://jqueryui.com/demos/datepicker/#option-minDate

【讨论】：

+1：我使用 minDate 和 maxDate 设置了一个有效的日期间隔，它就像一个魅力。

【解决方案6】：

将零设置为mindate，它将禁用过去的日期。

$( "#datepicker" ).datepicker({ minDate: 0});

Live example

read more here

【讨论】：

【解决方案7】：

这行得通：

$("#datepicker").datepicker({ minDate: +0 });

【讨论】：

【解决方案8】：

//禁用未来日期

$('#datetimepicker1').datetimepicker({
            format: 'DD-MM-YYYY',
            maxDate: new Date
        });

//禁用过去的日期

 $('#datetimepicker2').datetimepicker({
        format: 'DD-MM-YYYY',
        minDate: new Date
    });

【讨论】：

我不确定为什么这个答案被否决了，因为它的解决方案对我有用，而使用 0 的公认解决方案导致 JavaScript 错误。 +1

【解决方案9】：

$("#datePicker").datePicker({startDate: new Date() });。这对我有用

【讨论】：

【解决方案10】：

我正在使用以下代码来格式化日期并在日历中显示 2 个月...

<script>
$(function() {

    var dates = $( "#from, #to" ).datepicker({

        showOn: "button",
        buttonImage: "imgs/calendar-month.png",
        buttonImageOnly: true,                           
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,

        onSelect: function( selectedDate ) {




            $( ".selector" ).datepicker({ defaultDate: +7 });
            var option = this.id == "from" ? "minDate" : "maxDate",


                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );

            dates.not( this ).datepicker( "option", "dateFormat", 'yy-mm-dd' );


        }
    });
});

</script>

问题是我不确定如何限制以前的日期选择。

【讨论】：

【解决方案11】：

确保您将多个属性放在同一行中（因为您只显示了 1 行代码，您可能遇到了与我相同的问题）。

我会设置默认日期，但不会灰显旧日期。这不起作用：

$('#date_end').datepicker({ defaultDate: +31 })
$('#date_end').datepicker({ minDate: 1 })

这两者兼而有之：

$('#date_end').datepicker({ defaultDate: +31, minDate: 1 })

1 和 +1 的工作方式相同（或在您的情况下为 0 和 +0）。

我：Windows 7 x64、Rails 3.2.3、Ruby 1.9.3

【讨论】：

【解决方案12】：

var givenStartDate = $('#startDate').val();
        alert('START DATE'+givenStartDate);
        var givenEndDate = $('#endDate').val();
        alert('END DATE'+givenEndDate);
        var date = new Date();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var currentDate = date.getFullYear() + '-' +
            (month<10 ? '0' : '') + month + '-' +
            (day<10 ? '0' : '') + day;
        if(givenStartDate < currentDate || givenEndDate < currentDate)
         { 
        $("#updateButton").attr("disabled","disabled"); 
         }
         if(givenStartDate < currentDate && givenEndDate > currentDate)
            {
            $("#updateButton").attr("enabled","enabled");
            }
         if(givenStartDate > currentDate || givenEndDate > currentDate) { 
        $("#updateButton").attr("enabled","enabled"); 
         }

试试这个。如果有任何错误，请纠正我：）谢谢大家。

【讨论】：

【解决方案13】：

这应该可以<input type="text" id="datepicker">

var dateToday = new Date();
$("#datepicker").datepicker({
    minDate: dateToday,
    onSelect: function(selectedDate) {
    var option = this.id == "datepicker" ? "minDate" : "maxDate",
    instance = $(this).data("datepicker"),
    date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
    dates.not(this).datepicker("option", option, date);
    }
});

【讨论】：

【解决方案14】：

尝试将startDate 设置为当前日期。例如：

$('.date-pick').datePicker({startDate:'01/01/1996'});

【讨论】：

这看起来像是 Kevin Luck 的日期选择器，而不是标准的 JQuery 选择器

【解决方案15】：

我使用了 min 属性：min="' + (new Date()).toISOString().substring(0,10) + '"

这是我的代码，它有效。

<input type="date" min="' + (new Date()).toISOString().substring(0,10) + '" id="' + invdateId + '" value="' + d.Invoice.Invoice_Date__c + '"/>

【讨论】：