如何在jQuery datepicker中禁用日期?

How do I disable dates before today in jQuery datepicker WITHOUT using minDate: 0?

如何在jQuery datepicker中禁用日期而不使用minDate: 0?

I would like to enable navigation of the calendar as per usual before today while making sure that user do NOT pick dates before today.

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

(i.e. say today's date is 11Aug11 and I would like all the dates before this disabled but still enabling user to go to previous months, years, etc.)

(也就是说，今天的日期是8月11日，我希望在此之前的所有日期都禁用，但仍然允许用户访问前几个月、几年等等。)

5 个解决方案

#1

While I agree that it's weird behavior, you might be able to fake it using the onSelect event of the datepicker.

虽然我同意这是一种奇怪的行为，但是您可以使用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');
            }
        }
    });
});

Basically, you handle the onSelect event.

基本上，您处理onSelect事件。

When a date is selected, check to see if it's before today's date.

选择日期时，检查是否在今天之前。

If it is, then you immediately show the datepicker again and clear out the input box attached to it.

如果是，则立即再次显示datepicker，并清除附加到它的输入框。

Updated Code sample is now completely functional. Here's a jsfiddle to demonstrate.

更新的代码示例现在已经完全正常了。这是一个小提琴演示。

#2

Hope this is still helpful to someone. My solution is to place checks on individual dates like this:

希望这对某些人仍然有帮助。我的解决办法是对这样的日期进行检查:

$("#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];
}

I find it simple and elegant

我觉得它简单而优雅。

#3

It doesn't appear to be configurable. At line 1434 of jquery.ui.datepicker.js, if a maxDate is specified, it sets a maxDraw variable and draws up to the month of that date, without regard for any other flags.

它看起来不是可配置的。在jquery.ui.datepicker的1434行。如果指定了maxDate，它将设置maxDraw变量并绘制到该日期的月份，而不考虑任何其他标志。

But I also agree with zzzzBov. Why would the user need to see values they can't select?

但我也同意他的观点。为什么用户需要看到他们不能选择的值?

#4

Instead you can write a function in your .js file like this-

相反，您可以在.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)
             });
            }
})

Here "dateToSelect" is the id of the field where the date is shown. The checking of the date length here is not mandatory.

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

#5

simplest solution could....

简单的解决方案可能....

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

#1