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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7013640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 00:15:18  来源:igfitidea点击:

how to disable dates before today in jQuery datepicker

javascriptjquerydatepicker

提问by user864600

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

如何在不使用的情况下minDate: 0在 jQuery datepicker 中禁用今天之前的日期?

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.)

(即说今天的日期是 11Aug11,我想要禁用此之前的所有日期,但仍然允许用户转到前几个月、几年等)

回答by Mark Biek

While I agree that it's weird behavior, you might be able to fake it using the onSelectevent of the 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 onSelectevent.

基本上,您处理onSelect事件。

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

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

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

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



UpdatedCode sample is now completely functional. Here's a jsfiddleto demonstrate.

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

回答by memory of a dream

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

我觉得它简单而优雅

回答by devia

simplest solution could....

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

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

回答by HassanF

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。此处的日期长度检查不是强制性的。

回答by Lobstrosity

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

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

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

但我也同意 zzzzBov。为什么用户需要看到他们无法选择的值?

回答by Chirag Jain

You could simply write like this

你可以简单地这样写

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