html - 从 html5 datepicker 禁用某些日期

Question

当我使用我想禁用一个场景的当前日期和其他场景的未来日期时，是否可以禁用日期。我应该如何禁用日期？

Answer 1

您可以将minormax属性添加到input type=date. 日期必须采用 ISO 格式 (yyyy-mm-dd)。尽管用户可以在不使用日期选择器的情况下手动输入无效日期，但许多移动浏览器和当前版本的 Chrome 都支持这一点。

<input name="somedate" type="date" min="2013-12-25">

和属性必须是完整日期min；无法指定“今天”或“ ”。为此，您需要使用 JavaScript 或服务器端语言：max+0

var today = new Date().toISOString().split('T')[0];
document.getElementsByName("somedate")[0].setAttribute('min', today);

http://jsfiddle.net/mblase75/kz7d2/

只排除今天，同时允许过去或未来的日期，不是这里的选择。但是，如果您的意思是希望明天成为min日期（删除今天和所有过去的日期），请参阅此问题以增加today一天。

与涉及 HTML 表单的所有其他情况一样，您应该始终在服务器端验证字段，无论您如何在客户端约束它。

Answer 2

min在纯 HTML 中，您可以对日期设置的唯一限制是通过andmax属性设置的下限和上限。在下面的示例中，仅允许我发布此问题的一周中的日期，其他日期显示为灰色并且单击它们不会更新输入值：

<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"/>

Answer 3

HTML datepicker( <input type=date>) 支持min/max属性，但并未得到广泛支持。

同时你可以考虑使用bootstrap-datepicker， v1.2.0 在github 上。

参考：

W3C 规范

Answer 4

您可以使用它来禁用未来的日期：
在您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"/>

这是工作的jFiddle 演示

Answer 5

对于 react 和类似的库，您可以使用它来禁用今天之前的所有日期。

<input type='date' min={new Date().toISOString().split('T')[0]} >