如何在輸入類型 = 日期中禁用一周后的未來日期？
[英]How to disable future dates after a week in input type = date?
問題描述
我有一個type=date的input框。 我希望它在從當前日期起一周后禁用所有日期。 假設當前日期是 11/07/2017，我希望禁用 18/07/2017 中的所有日期。 所以用戶只能選擇從今天起一周內的日期。 我已經在我的代碼中禁用了過去的日期。
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 個解決方案
解決方案1
3 已采納 2017-07-11 07:42:59
請參閱更新的代碼。
[after how many number of days to be disabled i.e. 6 in this case] * 24 * 60 * 60 * 1000
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>
解決方案2
1 2017-07-11 07:43:20
您可以使用'max'禁用將來的日期：
var nextWeek = new Date();
nextWeek = nextWeek.setDate(nextWeek.getDate() + 1).toISOString().split('T')[0];
document.getElementsByName("date")[0].setAttribute('max', nextWeek);
解決方案3
1 2017-07-11 07:43:56
你可以有類似的東西
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'
}
);
工作演示http://jsfiddle.net/X82aC/544/
如果您需要任何進一步的幫助，請告訴我
解決方案4
1 2017-07-11 07:46:27
您可以使用日期選擇器的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>
解決方案5
1 2017-07-11 07:47:06
您應該能夠設置日期的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);
}
解決方案6
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'))?>">
解決方案7
0 2021-10-31 10:13:52
添加到@lalit sachdeva 的代碼
我想要有人只能從今天起選擇 3 天，從那時起最多選擇 10 天。 因此，如果有人需要 + 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);
});
如何阻止用戶在以角度輸入的日期類型中輸入將來的日期
[英]How to stop user from typing in future dates in date type input in angular
如何使用 JavaScript 或 Bootstrap 在日期選擇器中禁用當前日期和未來日期
[英]How to disable the current date and future dates in datepicker using JavaScript or Bootstrap
如何禁用日期直到當前日期？ 對於輸入類型 Datetime-local
[英]How do I disable dates till current date? For input Type Datetime-local
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.