选中日期在限制数组时显示无效提示的JS代码问题求助

以下是修正后的完整代码，实现选中日期在RestrictedDate数组中时显示Invalid date的需求：

HTML 代码 #

<input id="datetime" type="date" step="1">
<p id="status"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>

JavaScript 代码 #

var datetimeElement = document.getElementById("datetime");
var statusElement = document.getElementById("status");
var RestrictedDate = ["20/10/2022", "21/10/2022", "22/10/2022", "23/10/2022", "24/10/2022"];

function checkValidity() {
  const selectedDate = datetimeElement.value;
  if (!selectedDate) {
    statusElement.innerHTML = 'Please select date.';
    return;
  }

  // 将input返回的YYYY-MM-DD格式转换为限制数组一致的DD/MM/YYYY格式
  const formattedDate = moment(selectedDate).format('DD/MM/YYYY');
  
  // 检查选中日期是否在限制列表内
  if (RestrictedDate.includes(formattedDate)) {
    statusElement.innerHTML = 'Invalid date';
  } else {
    statusElement.innerHTML = 'Valid date';
  }
}

// 监听日期选择变化事件触发校验，替代轮询提升性能
datetimeElement.addEventListener('change', checkValidity);
// 页面加载时初始化状态
checkValidity();

关键修改说明 #

• 替换setInterval为change事件监听：仅在用户修改日期时触发校验，避免不必要的性能消耗
• 统一日期格式：将input返回的YYYY-MM-DD格式转换为与限制数组匹配的DD/MM/YYYY，确保判断准确
• 简化逻辑：直接使用数组includes方法判断日期是否在限制列表中，替代错误的字符串比较逻辑
• 完善空值判断：用户未选择日期时直接提示选择，无需多余的有效性校验

内容的提问来源于stack exchange，提问作者Waller