How to disable future dates after a week in input type = date?
Question
I have an input box of type=date . 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. 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>
7 answers
solution1
3 ACCPTED 2017-07-11 07:42:59
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"
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>
solution2
1 2017-07-11 07:43:20
You can use 'max' to disable the future date:
var nextWeek = new Date();
nextWeek = nextWeek.setDate(nextWeek.getDate() + 1).toISOString().split('T')[0];
document.getElementsByName("date")[0].setAttribute('max', nextWeek);
solution3
1 2017-07-11 07:43:56
You can have something like
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
$( "#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/
Let me know if you require any further help
solution4
1 2017-07-11 07:46:27
You can use the max attribute of the date picker.
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>
solution5
1 2017-07-11 07:47:06
You should be able to set the max attribute for the date:
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);
}
solution6
0 2017-07-11 07:53:00
只需使用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'))?>">
solution7
0 2021-10-31 10:13:52
to add to @lalit sachdeva's code
I wanted where someone can only select 3 days from today and a max of 10 days from then. So here is the edited code if someone needs + 72 hours and max 10 days.
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);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.