jQuery datepicker来防止过去的日期

时间:2009-11-23 22:10:46

标签: javascript jquery jquery-ui date datepicker

如何在jQuery datepicker上禁用过去的日期?我查找了选项,但似乎没有找到任何表明能够禁用过去日期的内容。

更新:感谢yall的快速​​回复。我试过没有运气。天仍然没有像我预期的那样变灰,仍然接受选定的过去日期。

我试过了:

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

不起作用。

我试过了:

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

仍然无法正常工作。

它显示日历小部件就好了。它不会灰色或阻止过去几天的输入。我曾经尝试过minDate和maxDate而没有运气,所以我认为它一定不是他们。

15 个答案:

答案 0 :(得分:137)

试试这个:

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

0删除引号。

答案 1 :(得分:34)

您只需指定最短日期 - 将其设置为0表示最短日期是从今天起的0天,即今天。您可以改为传递字符串'0d'(默认单位为天)。

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

答案 2 :(得分:23)

删除围绕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' />

答案 3 :(得分:23)

如果您正在处理以前绑定的日期选择器,请设置

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

不起作用。该语法仅在您创建窗口小部件时适用。

要为绑定日期选择器设置最小日期,请使用以下命令:

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

答案 4 :(得分:14)

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

答案 5 :(得分:10)

考虑到零并且它将禁用过去的日期。

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

Live example

read more here

答案 6 :(得分:9)

这有效:

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

答案 7 :(得分:7)

//禁用未来日期

declare 
@Sigle VARCHAR(150), @Enseigne VARCHAR(150), @SigleEnseigne1 VARCHAR(150)
EXEC  SigleEnseigne @Sigle OUTPUT, @Enseigne OUTPUT, @SigleEnseigne1 OUTPUT

//禁用过去的日期

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

答案 8 :(得分:5)

Ext.ComponentQuery.query("treelist")[0].setIndent(0); 。 这对我有用

答案 9 :(得分:2)

我使用以下代码格式化日期并在日历中显示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>

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

答案 10 :(得分:2)

这应该有效<input type="text" id="datepicker">

var dateToday = new Date();
$("#datepicker").datepicker({
    minDate: dateToday,
    onSelect: function(selectedDate) {
    var option = this.id == "datepicker" ? "minDate" : "maxDate",
    instance = $(this).data("datepicker"),
    date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
    dates.not(this).datepicker("option", option, date);
    }
});

答案 11 :(得分:1)

确保将多个属性放在同一行中(因为您只显示了一行代码,您可能遇到了同样的问题)。

我会设置默认日期,但不会使旧日期变灰。这不起作用:

$('#date_end').datepicker({ defaultDate: +31 })
$('#date_end').datepicker({ minDate: 1 })

这两者都有:

$('#date_end').datepicker({ defaultDate: +31, minDate: 1 })

1和+1的工作方式相同(或者在你的情况下为0和+0)。

Me:Windows 7 x64,Rails 3.2.3,Ruby 1.9.3

答案 12 :(得分:1)

var givenStartDate = $('#startDate').val();
        alert('START DATE'+givenStartDate);
        var givenEndDate = $('#endDate').val();
        alert('END DATE'+givenEndDate);
        var date = new Date();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var currentDate = date.getFullYear() + '-' +
            (month<10 ? '0' : '') + month + '-' +
            (day<10 ? '0' : '') + day;
        if(givenStartDate < currentDate || givenEndDate < currentDate)
         { 
        $("#updateButton").attr("disabled","disabled"); 
         }
         if(givenStartDate < currentDate && givenEndDate > currentDate)
            {
            $("#updateButton").attr("enabled","enabled");
            }
         if(givenStartDate > currentDate || givenEndDate > currentDate) { 
        $("#updateButton").attr("enabled","enabled"); 
         }

试试这个。如果有任何错误,请纠正我:)谢谢大家。

答案 13 :(得分:0)

尝试将startDate设置为当前日期。例如:

$('.date-pick').datePicker({startDate:'01/01/1996'});

答案 14 :(得分:0)

我使用了min属性:min="' + (new Date()).toISOString().substring(0,10) + '"

这是我的代码,它有效。

<input type="date" min="' + (new Date()).toISOString().substring(0,10) + '" id="' + invdateId + '" value="' + d.Invoice.Invoice_Date__c + '"/>

enter image description here