jQuery 日期选择器 - 禁用过去的日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8356358/
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
jQuery Date Picker - disable past dates
提问by Harsha M V
I am trying to have a date Range select using the UI date picker.
我正在尝试使用 UI 日期选择器选择日期范围。
in the from/to field people should not be able to view or select dates previous to the present day.
在 from/to 字段中，人们不应能够查看或选择今天之前的日期。
This is my code:
这是我的代码：
$(function() {
var dates = $( "#from, #to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function( selectedDate ) {
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", option, date );
}
});
});
Can some one tell me how to disable dates previous the to the present date.
有人可以告诉我如何禁用当前日期之前的日期。
回答by Nicola Peluchetti
You must create a new date object and set it as minDatewhen you initialize the datepickers
您必须创建一个新的日期对象并将其设置为minDate初始化日期选择器时
<label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/>
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
minDate: dateToday,
onSelect: function(selectedDate) {
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", option, date);
}
});
Edit - from your comment now it works as expected http://jsfiddle.net/nicolapeluchetti/dAyzq/1/
编辑 - 从你的评论现在它按预期工作http://jsfiddle.net/nicolapeluchetti/dAyzq/1/
回答by Sachin
Declare dateToday variable and use Date() function to set it.. then use that variable to assign to minDate which is parameter of datepicker.
声明 dateToday 变量并使用 Date() 函数对其进行设置..然后使用该变量分配给作为 datepicker 参数的 minDate。
var dateToday = new Date();
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true,
minDate: dateToday
});
});
That's it... Above answer was really helpful... keep it up guys..
就是这样......上面的答案真的很有帮助......保持吧伙计......
回答by Riya Travel
$('#datepicker-dep').datepicker({
minDate: 0
});
minDate:0works for me.
minDate:0为我工作。
回答by Mosin
Use the "minDate" option to restrict the earliest allowed date. The value "0" means today (0 days from today):
使用“minDate”选项限制允许的最早日期。值“0”表示今天（从今天起 0 天）：
$(document).ready(function () {
$("#txtdate").datepicker({
minDate: 0,
// ...
});
});
Docs here: http://api.jqueryui.com/datepicker/#option-minDate
回答by P?lOliver
Just to add to this:
只是为了补充一点：
If you also need to prevent the user to manually typea date in the past, this is a possible solution. This is what we ended up doing (based on @Nicola Peluchetti's answer)
如果您还需要防止用户手动输入过去的日期，这是一个可能的解决方案。这就是我们最终要做的（基于@Nicola Peluchetti 的回答）
var dateToday = new Date();
$("#myDatePickerInput").change(function () {
var updatedDate = $(this).val();
var instance = $(this).data("datepicker");
var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, updatedDate, instance.settings);
if (date < dateToday) {
$(this).datepicker("setDate", dateToday);
}
});
What this does is to change the value to today's date if the user manually types a date in the past.
如果用户手动键入过去的日期，则这样做是将值更改为今天的日期。
回答by hari
Live Demo,try this,
现场演示，试试这个，
$('#from').datepicker(
{
minDate: 0,
beforeShow: function() {
$(this).datepicker('option', 'maxDate', $('#to').val());
}
});
$('#to').datepicker(
{
defaultDate: "+1w",
beforeShow: function() {
$(this).datepicker('option', 'minDate', $('#from').val());
if ($('#from').val() === '') $(this).datepicker('option', 'minDate', 0);
}
});
回答by Sameera Prasad Jayasinghe
This is easy way to do this
这是做到这一点的简单方法
$('#datepicker').datepicker('setStartDate', new Date());
also we can disable future days
我们也可以禁用未来的日子
$('#datepicker').datepicker('setEndDate', new Date());
回答by Anna
set startDate attribute of datepicker, it works, below is the working code
设置 datepicker 的 startDate 属性，它可以工作，下面是工作代码
$(function(){
$('#datepicker').datepicker({
startDate: '-0m'
//endDate: '+2d'
}).on('changeDate', function(ev){
$('#sDate1').text($('#datepicker').data('date'));
$('#datepicker').datepicker('hide');
});
})
回答by Mohammad Faisal
jQuery API documentation - datepicker
The minimum selectable date. When set to null, there is no minimum.
最小可选日期。设置为 时null，没有最小值。
Multiple types supported:
支持多种类型：
Date:A date object containing the minimum date.
Number:A number of days from today. For example 2represents two daysfrom today and -1represents yesterday.
String:A string in the format defined by the dateFormatoption, or a relative date.
Relative dates must contain value and period pairs; valid periods are yfor years, mfor months, wfor weeks, and dfor days. For example, +1m +7drepresents one month and seven daysfrom today.
日期：包含最小日期的日期对象。
数量：从今天算起的天数。例如2代表two days从今天开始和-1代表yesterday。
字符串：由dateFormat选项定义的格式的字符串，或相对日期。
相对日期必须包含值和周期对；有效期间为yfor years、mfor months、wforweeks和dfor days。例如，+1m +7d代表one month and seven daysfrom today。
In order not to display previous dates other than today
为了不显示今天以外的其他日期
$('#datepicker').datepicker({minDate: 0});
回答by sreekanth
"mindate" attribute should be used to disable passed dates in jquery datepicker.
“ mindate”属性应该用于在 jquery datepicker中禁用传递的日期。
minDate: new Date() Or minDate: '0' is the key for this.
minDate: new Date() 或 minDate: '0' 是这个的关键。
Ex:
$(function() {
$( "#datepicker" ).datepicker({minDate: new Date()});
});
OR
或者
$(function() {
$( "#datepicker" ).datepicker({minDate: 0});
});
