Html 从 html5 datepicker 禁用某些日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17182544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable certain dates from html5 datepicker
提问by Seeya K
Is it possible to disable dates when I use I want to disable current date for one scenario and future dates for other scenario. How should I disable the dates?
使用时是否可以禁用日期我想禁用一个场景的当前日期和其他场景的未来日期。我应该如何禁用日期？
回答by Blazemonger
You can add a minor maxattribute to the input type=date. The date must be in ISO format (yyyy-mm-dd). This is supported in many mobile browsers and current versions of Chrome, although users can manually enter an invalid date without using the datepicker.
您可以将min或max属性添加到input type=date. 日期必须采用 ISO 格式 (yyyy-mm-dd)。许多移动浏览器和当前版本的 Chrome 都支持这一点，尽管用户可以在不使用日期选择器的情况下手动输入无效日期。
<input name="somedate" type="date" min="2013-12-25">
The minand maxattributes mustbe a full date; there's no way to specify "today" or "+0". To do that, you'll need to use JavaScript or a server-side language:
在min和max属性必须是一个完整的日期; 没有办法指定“今天”或“ +0”。为此，您需要使用 JavaScript 或服务器端语言：
var today = new Date().toISOString().split('T')[0];
document.getElementsByName("somedate")[0].setAttribute('min', today);
http://jsfiddle.net/mblase75/kz7d2/
http://jsfiddle.net/mblase75/kz7d2/
Ruling out only today, while allowing past or future dates, is not an option with here. However, if you meant you want tomorrow to be the mindate (blanking out today and all past dates), see this questionto increment todayby one day.
仅排除今天，同时允许过去或将来的日期，在这里不是一种选择。但是，如果您的意思是希望明天成为min日期（将今天和过去的所有日期清空），请参阅此问题以增加today一天。
As in all other cases involving HTML forms, you should always validate the field server-side regardless of how you constrain it client-side.
与涉及 HTML 表单的所有其他情况一样，无论您如何在客户端对其进行约束，您都应该始终在服务器端验证字段。
回答by leesei
HTML datepicker (<input type=date>) supports min/maxattribute, but it is not widely supported.
HTML datepicker( <input type=date>) 支持min/max属性，但并未得到广泛支持。
At the meantime you may consider using bootstrap-datepicker, v1.2.0 is on github.
同时你可以考虑使用bootstrap-datepicker， v1.2.0 在github 上。
References:
参考：
回答by Nino Filiu
In pure HTML, the only restrictions you can put on dates are its lower and upper bounds through the minand maxattributes. In the example below, only the dates of the week I'm posting this question are allowed, other appear greyed out and clicking on them doesn't update the input value:
在纯 HTML 中，您可以对日期施加的唯一限制是它通过min和max属性的下限和上限。在下面的示例中，只允许我发布此问题的一周日期，其他日期显示为灰色，单击它们不会更新输入值：
<input type="date" min="2019-06-02" max="2019-06-08"/>You can also disable any invalid date by using a few lines of JavaScript, but this doesn't ship with all the native <input type="date">features like greyed-out dates. What you can do is set the date value to ''in case of an invalid date, an error message could also be displayed. Here is an example of an input that doesn't accept weekend dates:
您还可以通过使用几行 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"/>回答by Sreejith BS
You could use this to disable future dates :
Inside you document.readyfunction, place
您可以使用它来禁用未来日期：
在您的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);
and in form
和形式
<input id="dateID" type="date"/>
Here is the working jFiddle Demo
这是工作中的jFiddle Demo
