[英]How to disable future dates after a week in input type = date?
I have an input
box of type=date
.我有一个
type=date
的input
框。 I want it to disable all dates after one week from current date.我希望它在从当前日期起一周后禁用所有日期。 Suppose current date is 11/07/2017, I want all dates from 18/07/2017 to be disabled.
假设当前日期是 11/07/2017,我希望禁用 18/07/2017 中的所有日期。 So the user can select only dates within one week from today.
所以用户只能选择从今天起一周内的日期。 I've already disabled the past dates in my code.
我已经在我的代码中禁用了过去的日期。
function validDate(){ var today = new Date().toISOString().split('T')[0]; document.getElementsByName("date")[0].setAttribute('min', today); }
<body onload="validDate()"> <div class="form-group"> <p>Date<span>*</span></p> <input type="date" name="date" id="date" class="form-control input-sm " required /> </div> </body>
Please see the updated code. 请参阅更新的代码。
[after how many number of days to be disabled i.e. 6 in this case] * 24 * 60 * 60 * 1000
min
and max
attributes are used to set the minimum and maximum date for type="date" min
和max
属性用于设置type =“date”的最小和最大日期
function validDate(){ var today = new Date().toISOString().split('T')[0]; var nextWeekDate = new Date(new Date().getTime() + 6 * 24 * 60 * 60 * 1000).toISOString().split('T')[0] document.getElementsByName("date")[0].setAttribute('min', today); document.getElementsByName("date")[0].setAttribute('max', nextWeekDate) }
<body onload="validDate()"> <div class="form-group"> <p>Date<span>*</span></p> <input type="date" name="date" id="date" class="form-control input-sm " required /> </div> </body>
You can use 'max' to disable the future date: 您可以使用'max'禁用将来的日期:
var nextWeek = new Date();
nextWeek = nextWeek.setDate(nextWeek.getDate() + 1).toISOString().split('T')[0];
document.getElementsByName("date")[0].setAttribute('max', nextWeek);
You can have something like 你可以有类似的东西
HTML HTML
<table width="68%" border="0" align="center" cellpadding="0" cellspacing="6">
<tr>
<td align="left" valign="middle" class="search-filter-headings">Start Date:</td>
<td align="left" valign="middle">
<input type="text" name="start_date" id="start_date" class="filter-textfields" placeholder="Start Date"/>
</td>
</tr>
<tr>
<td align="left" valign="middle" class="search-filter-headings">End Date:</td>
<td align="left" valign="middle">
<input type="text" name="end_date" id="end_date" class="filter-textfields" placeholder="End Date"/>
</td>
</tr>
</table>
JAVASCRIPT JAVASCRIPT
$( "#start_date" ).datepicker(
{
maxDate: '0',
beforeShow : function()
{
jQuery( this ).datepicker({ maxDate: 0 });
},
altFormat: "dd/mm/yy",
dateFormat: 'dd/mm/yy'
}
);
$( "#end_date" ).datepicker(
{
maxDate: '7',
beforeShow : function()
{
jQuery( this ).datepicker('option','minDate', jQuery('#start_date').val() );
} ,
altFormat: "dd/mm/yy",
dateFormat: 'dd/mm/yy'
}
);
Working Demo http://jsfiddle.net/X82aC/544/ 工作演示http://jsfiddle.net/X82aC/544/
Let me know if you require any further help 如果您需要任何进一步的帮助,请告诉我
You can use the max attribute of the date picker. 您可以使用日期选择器的max属性。
function getInputDateFormat(date) { return date.toISOString().split('T')[0]; } function validDate() { var today = new Date(); var maxDate = new Date(); maxDate.setDate(maxDate.getDate() + 7); document.getElementsByName("date")[0].setAttribute('min', getInputDateFormat(today)); document.getElementsByName("date")[0].setAttribute('max', getInputDateFormat(maxDate)); }
<body onload="validDate()"> <div class="form-group"> <p>Date<span>*</span></p> <input type="date" name="date" id="date" class="form-control input-sm " required /> </div> </body>
You should be able to set the max
attribute for the date: 您应该能够设置日期的
max
属性:
function validDate(){
var today = new Date().toISOString().split('T')[0];
var newDate = today()today.setDate(today.getDate() + 7);
document.getElementsByName("date")[0].setAttribute('min', today);
document.getElementsByName("date")[0].setAttribute('max', newDate);
}
只需使用php date在输入日期中传递min和max参数,检查下面的代码
<input type="date" name="date" min="<?=date('Y-m-d')?>" max="<?=date('Y-m-d',strtotime(date('Y-m-d').'+7 days'))?>">
to add to @lalit sachdeva's code添加到@lalit sachdeva 的代码
I wanted where someone can only select 3 days from today and a max of 10 days from then.我想要有人只能从今天起选择 3 天,从那时起最多选择 10 天。 So here is the edited code if someone needs + 72 hours and max 10 days.
因此,如果有人需要 + 72 小时和最多 10 天,这里是编辑后的代码。
jQuery(document).ready(function($){
var today = new Date(new Date().getTime() + 3 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
var nextWeekDate = new Date(new Date().getTime() + 10 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
document.getElementsByName("merchant_param3")[0].setAttribute('min', today);
document.getElementsByName("merchant_param3")[0].setAttribute('max', nextWeekDate);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.