jQuery日期选择器以防止过去的日期

Question

如何在jQuery日期选择器上禁用过去的日期？我查找了选项，但没有找到任何表明可以禁用过去日期的选项。

更新：谢谢大家的快速回应。我尝试了那个方法但没有成功。日期仍然没有像我预期的那样变灰并且仍然接受已选择的过去日期。

我尝试了这个：

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

不起作用。

我尝试过这个：

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

仍然不起作用。

它可以正常显示日历小部件，但不会使过去的日期变灰或阻止输入。我以前尝试过minDate和maxDate，但没有成功，所以我认为问题不在于它们。

- netrox

Answer 1

试试这个：

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

将0中的引号删除。

- Khawar

---

@BWDesign比我晚了一年半回答;) - Russ Cam

你救了我，我的朋友。 - Smile

Answer 2

你只需要指定一个最小日期 - 将其设置为0意味着最小日期是从今天开始的0天，也就是今天。你可以传递字符串'0d'代替（默认单位为天）。

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

- Russ Cam

Answer 3

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

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

这不会起作用。这种语法只适用于您创建窗口小部件时。

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

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

- Zephyr was a Friend of Mine

---

谢谢。我浪费了很长时间来寻找这个解决方案，但它解决了我的问题。 - Rushan

Answer 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' />

- Rahul Desai

---

为什么需要逗号的解释？我可以删除它，一切仍然正常运行。是否有某个浏览器要求单属性对象使用逗号？ - schickm

只有在使用多个选项时才需要逗号，例如： $('#datepicker').datepicker({ minDate: 0, maxDate: "+1M +10D", dateFormat: 'yy-mm-dd' }); 在最后一个选项后面不需要逗号。 - Tanvir

你正在向方法发送一个对象。在最后一个值上加逗号是不合适的。 - Brian Noah

逗号在一些浏览器中是不需要的，而且如果有逗号反而会破坏你的代码（已移除逗号）。 - iConnor

Answer 5

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

- Bill

---

+1：我使用了minDate和maxDate来设置有效的日期间隔，它的效果非常好。 - Jim Ferrans

Answer 6

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

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

实际演示

更多信息请点击此处

- Sonu Sindhu

Answer 7

这个可行：

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

- Anwasha Dhar

Answer 8

//禁用未来日期

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

//禁用过去的日期

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

- Anto

---

我不确定为什么这个答案被踩了，因为它的解决方案对我有效，而使用“0”的被接受的解决方案导致了JavaScript错误。+1 - Sheridan

Answer 9

$("#datePicker").datePicker({startDate: new Date() });.

这段代码可以让我选择日期。

- Akhil Yadav

Answer 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>

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

- HeySingapore