选择过去日期时如何禁用输入 HTML 输入日期？答案

【问题标题】：How to disable to type in HTML input date when choosing past dates?选择过去日期时如何禁用输入 HTML 输入日期？
【发布时间】：2022-01-13 06:20:11
【问题描述】：

我正在尝试禁用 input type="date" 中的过去日期。我可以在日期选择器中限制以前的日期。但是当我在 HTML 日期选择器中输入任何以前的日期时，即使日期已经完成，我也可以保存数据（例如，我输入 12/08/2020）

$(document).ready(function() { //DISABLED PAST DATES IN APPOINTMENT DATE
  var dateToday = new Date();
  var month = dateToday.getMonth() + 1;
  var day = dateToday.getDate();
  var year = dateToday.getFullYear();

  if (month < 10)
    month = '0' + month.toString();
  if (day < 10)
    day = '0' + day.toString();

  var maxDate = year + '-' + month + '-' + day;

  $('#txt-appoint_date').attr('min', maxDate);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="txt-appoint_date" />

【问题讨论】：

何时验证输入值？当表单提交或输入失去焦点或用户输入值时，...？
表单提交后。因为我想从数据库中保存日期值。
只要把它放在一个表单标签中，它会自动验证 datePicker 的值是否大于 min 属性。

标签： javascript html jquery date

【解决方案1】：

您可以禁用keyboard onkeydown event。

$(document).ready(function() { //DISABLED PAST DATES IN APPOINTMENT DATE
  var dateToday = new Date();
  var month = dateToday.getMonth() + 1;
  var day = dateToday.getDate();
  var year = dateToday.getFullYear();

  if (month < 10)
    month = '0' + month.toString();
  if (day < 10)
    day = '0' + day.toString();

  var maxDate = year + '-' + month + '-' + day;

  $('#txt-appoint_date').attr('min', maxDate);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="txt-appoint_date" onkeydown="return false"/>

【讨论】：

非常感谢，它有效！