如何限制输入类型 datetime-local 中的无效

Question

<input type="datetime-local" step="1">

在此，如何避免无效的日期输入。假设我像“ 11：11：1111” 插入日期 以“ mm-dd-yyyy”格式。如何使用Moment.js解决这个问题

Answer 1

尝试使用 isValid() 方法来确保 DateTime 有效，或者查看我检查日期是否早于指定年份的第二个示例。
例子：

// Variables
var datetimeElement = document.getElementById("datetime");
var statusElement = document.getElementById("status");

// A simple function to check the validity of a date using the isValid() method
function checkValidity() {
  if (moment(datetimeElement.value.toString()).isValid()) {
    // Datetime is in a valid format
    statusElement.innerHTML = 'Valid datetime';
  } else {
    // Invalid datetime format
    statusElement.innerHTML = 'Invalid datetime';
  }
}

// Check date validity every 1 seconds and update the text
setInterval(function() {
    checkValidity();
  }, 1000);

<input id="datetime" type="datetime-local" step="1">
<p id="status"></p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>

在上面的示例中，如果您尝试输入诸如 11/11/11111 之类的日期，则会显示该日期无效。如果您想阻止指定年份之前的日期，可以使用以下命令：

// Variables
var datetimeElement = document.getElementById("datetime");
var statusElement = document.getElementById("status");

// A simple function to check the validity of a date using the isValid() method
function checkValidity() {
  if (moment(datetimeElement.value.toString()).isValid()) {
    // Datetime is in a valid format    
    // Check if datetime is older than the specified year (1900)
    if (moment(datetimeElement.value.toString()).format('YYYY') < 1900) {
      // Invalid date
      statusElement.innerHTML = 'Invalid datetime';
    } else {
      // Datetime is valid
      statusElement.innerHTML = 'Valid datetime';
    }
  } else {
    // Datetime is invalid
    statusElement.innerHTML = 'Invalid datetime';
  }
}

// Check date validity every 1 seconds and update the text
setInterval(function() {
    checkValidity();
  }, 1000);

<input id="datetime" type="datetime-local" step="1">
<p id="status"></p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>

如果您在上面的示例代码中输入早于 1900 年的年份，例如 01/01/1899，则会显示该年份无效。

我希望这对您的问题有所帮助。