Menu
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>
784
asked Jul 11 '17 07:07
How do I turn off past dates? the previous dates we need to set the minDate property of the date picker. if we set minDate:0 then it will disable all the previous dates. and we set input attribute min:current_date then it will disable all the previous dates.
daterangepicker({ autoUpdateInput: false, locale: { cancelLabel: 'Clear', format: 'DD-MM-YY' } });
< p >To disable the date field, double click the "Disable" button.
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>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);
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
39
answered Nov 13 '22 05:11
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
