如何限制输入类型 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，在上面的示例代码中，它会说它是无效的。

希望以上内容对您的问题有所帮助。