Question

如何在jQuery datepicker 之前禁用日期，而不使用minDate: 0 ？

我希望在今天之前按照惯例启用日历导航，同时确保用户不会在今天之前选择日期。

（即说今天的日期是11Aug11，我希望在禁用之前的所有日期，但仍然允许用户前几个月，几年等）。

Answer 1

虽然我同意这是一种奇怪的行为，但您可以使用datepicker的onSelect 事件伪造它。

$(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事件。

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

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

<强>更新代码示例现在完全正常运行。这是一个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

它似乎不可配置。在line 1434 of jquery.ui.datepicker.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()
})

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

6 个答案: