Question

我可以在使用时禁用日期我想禁用一个方案的当前日期和其他方案的未来日期。我该如何禁用日期？

Answer 1

You can add a min or max attribute to the input type=date。日期必须是ISO格式（yyyy-mm-dd）。许多移动浏览器和当前版本的Chrome都支持此功能，但用户可以在不使用日期选择器的情况下手动输入无效日期。

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

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

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

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

仅在今天排除，同时允许过去或将来的日期，这里不是一个选择。但是，如果您希望明天成为min日期（今天消隐和所有过去的日期），请this question将today增加一天。

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

Answer 2

HTML datepicker（<input type=date>）支持min / max属性，但它是not widely supported。

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

参考文献：

W3C spec

Answer 3

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

Answer 4

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

禁用html5 datepicker中的某些日期

4 个答案: