在我使用时禁用日期是否可行?
在我使用时禁用日期是否可行?
您可以在 input type=date
中添加 min
或 max
属性。日期必须符合 ISO 格式(yyyy-mm-dd)。这在许多移动浏览器和当前版本的 Chrome 中都得到支持,尽管用户可以手动输入无效日期而不使用日期选择器。
<input name="somedate" type="date" min="2013-12-25">
< p > min
和 max
属性必须是完整的日期,无法指定“今天”或“+0
”。要实现此功能,您需要使用 JavaScript 或服务器端语言:
var today = new Date().toISOString().split('T')[0];
document.getElementsByName("somedate")[0].setAttribute('min', today);
http://jsfiddle.net/mblase75/kz7d2/
排除今天,允许过去或未来的日期,这在这里不是一个选项。但是,如果你的意思是想让明天成为最小日期(清空今天和所有过去的日期),请参见此问题以将今天增加一天。在纯 HTML 中,你可以通过 min
和 max
属性来限制日期的下限和上限。在下面的示例中,只有我发布这个问题的当周日期是允许的,其他日期会变灰,并且点击它们不会更新输入值:
<input type="date" min="2019-06-02" max="2019-06-08"/>
你也可以使用几行JavaScript来禁用任何无效的日期,但这不会包含所有原生的<input type="date">
特性,比如变灰的日期。你可以在无效日期的情况下将日期值设置为''
,并显示错误消息。以下是一个示例,它不接受周末日期:
// Everything except weekend days
const validate = dateString => {
const day = (new Date(dateString)).getDay();
if (day==0 || day==6) {
return false;
}
return true;
}
// Sets the value to '' in case of an invalid date
document.querySelector('input').onchange = evt => {
if (!validate(evt.target.value)) {
evt.target.value = '';
}
}
<input type="date"/>
document.ready
函数内,添加以下代码://Display Only Date till today //
var dtToday = new Date();
var month = dtToday.getMonth() + 1; // getMonth() is zero-based
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var maxDate = year + '-' + month + '-' + day;
$('#dateID').attr('max', maxDate);
<input id="dateID" type="date"/>
根据您的需求,您还可以使用step
属性来仅启用特定日期 - 例如每个星期一或隔一天。您可以与min
和max
结合使用。
例如:每个星期一
<input type="date" step="7" value="2022-04-04">
<input type="date" step="7" value="2022-04-07">
每隔一天
<input type="date" step="2">
对于React和类似的库,你可以使用以下代码禁用所有今天之前的日期。
<input type='date' min={new Date().toISOString().split('T')[0]}>
onblur
事件(除了服务器端验证)来处理这个问题。 - Blazemonger