如何在 jQuery datepicker 中禁用今天之前的日期

Question

如何在 jQuery 日期选择器中禁用今天之前的日期而不使用 minDate: 0？

我想在今天之前像往常一样启用日历导航，同时确保用户不会选择今天之前的日期。

（即说今天的日期是 2011 年 8 月 11 日，我希望禁用此之前的所有日期，但仍然允许用户转到之前的月份、年份等）

Answer 1

虽然我同意这是奇怪的行为，但您可能可以使用 onSelect< 来伪造它/code>日期选择器的事件。

$(document).ready(function() {
    $('#Date').datepicker({
        onSelect: function(dateText, inst) {
            //Get today's date at midnight
            var today = new Date();
            today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear());
            //Get the selected date (also at midnight)
            var selDate = Date.parse(dateText);

            if(selDate < today) {
                //If the selected date was before today, continue to show the datepicker
                $('#Date').val('');
                $(inst).datepicker('show');
            }
        }
    });
});

基本上，您处理 onSelect 事件。

选择日期后，检查它是否在今天的日期之前。

如果是，那么您立即再次显示日期选择器并清除附加的输入框。

---

已更新
代码示例现已完全正常运行。这是一个 jsfiddle 来演示。

Answer 2

希望这对某人仍然有帮助。
我的解决方案是对各个日期进行检查，如下所示：

$("#StartDate").datepicker({ dateFormat: 'yy-mm-dd',  beforeShowDay: NotBeforeToday});



function NotBeforeToday(date)
{
    var now = new Date();//this gets the current date and time
    if (date.getFullYear() == now.getFullYear() && date.getMonth() == now.getMonth() && date.getDate() > now.getDate())
        return [true];
    if (date.getFullYear() >= now.getFullYear() && date.getMonth() > now.getMonth())
       return [true];
     if (date.getFullYear() > now.getFullYear())
       return [true];
    return [false];
}

我发现它简单而优雅

Answer 3

最简单的解决方案可以......

<script type="text/javascript">$('#date').datepicker({ minDate: 0 });</script>

Answer 4

它似乎不可配置。在 jquery.ui.datepicker 的第 1434 行.js，如果指定了 maxDate，它会设置一个 maxDraw 变量并绘制到该日期的月份，而不考虑任何其他旗帜。

但我也同意zzzzBov的观点。为什么用户需要查看他们无法选择的值？

Answer 5

相反，您可以在 .js 文件中编写一个函数，如下所示 -

$(function () {

             var date = new Date();
             var currentMonth = date.getMonth();
             var currentDate = date.getDate();
             var currentYear = date.getFullYear();

            if($("#dateToSelect").length > 0){
                $("#dateToSelect").datepicker({
                 maxDate: new Date(currentYear, currentMonth, currentDate)
             });
            }
})

这里“dateToSelect”是显示日期的字段的 id。此处的日期长度检查不是强制性的。

Answer 6

你可以简单地这样写

$('.datepicker').datetimepicker({
      format: 'DD-MM-YYYY',
      minDate: Date()
})