表单提交时第二个日期变量y显示无效日期，技术问题求助

提交表单后，JavaScript验证函数中的变量x可正常获取日期值，但变量y却显示为无效日期。

相关JavaScript代码 #

<script type="text/javascript">
function validatedates(form) {

  var x = new Date(form.post_at.value);
  var y = new Date(form.post_at_to_date.value);
  
  if (isNaN(+x) > isNaN(+y)) {
     Swal.fire({
       title: 'Dates dodgy'
     });

     return false;
  }
  
  if (x < y) {
      Swal.fire({
        icon: 'error',
        title:  'x= ' + x + ' y= '+ y ,
        text: 'Dates seem fine!',
       // footer: '<a href="">Why do I have this issue?</a>'
      });
      //alert('From Date is before Todate');

  } else {
      Swal.fire({
        icon: 'error',
        title:  'From Date := ' + x + ' y= '+ y ,
        text: 'Dates seem fine!',
        // footer: '<a href="">Why do I have this issue?</a>'
      });
  }
}
</script>

表单HTML代码 #

<form onsubmit="validatedates(this);return false;" name="frmSearch" method="post" action="" >
  <p class="search_input">
    <label>From</label>
    <input type="text" placeholder="From Date" type="date"   id="post_at" name="search[post_at]" value="<?php if (!empty($post_at))echo $post_at; ?>" class="input-control"/>
    <label>To</label>
    <input type="text" placeholder="To Date" type="date" id="post_at_to_date" name="search[post_at_to_date]" style="margin-left:10px" value="<?php if (!empty($post_at_to_date)) echo $post_at_to_date; ?>" class="input-control"/>          
     <p class="mb-4" align="right"><button type="submit" name="go" class="btn btn-success" value="Search"><i class="fa fa-calendar"></i> Run Selection</button></p>
  </p>
</form>

核心问题1：表单元素获取方式不匹配 #

你在JS里用form.post_at_to_date.value获取值，但HTML中该输入框的name属性是search[post_at_to_date]，并非post_at_to_date。第一个输入框能拿到值是因为浏览器会把表单内的元素id自动挂载为form对象的属性（第一个输入框id是post_at），但这属于浏览器的兼容行为，并非标准写法。

核心问题2：输入框重复定义type属性 #

两个输入框都重复写了type="text"和type="date"，虽然浏览器会取最后一个type值，但如果PHP输出的日期格式不符合date类型要求的YYYY-MM-DD标准格式，new Date()就会解析失败，返回无效日期。

具体修复步骤 #

1. 统一表单元素获取方式：
   改用id直接获取元素，避免name属性的嵌套结构问题，代码更直观：

   var x = new Date(document.getElementById('post_at').value);
   var y = new Date(document.getElementById('post_at_to_date').value);
   

2. 修正输入框type属性：
   删除重复的type="text"，只保留type="date"，确保浏览器提供标准日期选择器，输出符合解析要求的日期格式：

   <input placeholder="From Date" type="date" id="post_at" name="search[post_at]" value="<?php if (!empty($post_at))echo $post_at; ?>" class="input-control"/>
   <input placeholder="To Date" type="date" id="post_at_to_date" name="search[post_at_to_date]" style="margin-left:10px" value="<?php if (!empty($post_at_to_date)) echo $post_at_to_date; ?>" class="input-control"/>
   

3. 完善日期有效性验证：
   在进行日期比较前，先检查两个日期是否都有效，避免无效日期参与逻辑判断：

   function validatedates(form) {
     var x = new Date(document.getElementById('post_at').value);
     var y = new Date(document.getElementById('post_at_to_date').value);
     
     // 校验日期有效性
     if (isNaN(x.getTime()) || isNaN(y.getTime())) {
       Swal.fire({
         title: '无效日期',
         text: '请选择有效的日期范围'
       });
       return false;
     }
     
     // 日期比较逻辑
     if (x < y) {
       Swal.fire({
         icon: 'success',
         title: `开始日期: ${x} 结束日期: ${y}`,
         text: '日期范围正确（开始日期早于结束日期）'
       });
     } else {
       Swal.fire({
         icon: 'error',
         title: `开始日期: ${x} 结束日期: ${y}`,
         text: '结束日期不能早于开始日期'
       });
     }
     return false;
   }
   

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