ASP.NET MVC C#客户端日期比较失效：范围校验问题求解

你说得完全对——问题核心就是字符串类型的日期和Date对象直接比较会导致不可靠的结果。JavaScript在比较不同类型的值时会做隐式转换，字符串和Date的比较逻辑不是按日期大小来的，而是按字符串的字典序，这就会出现比如"2024-01-10"和Date对象比较时结果不符合预期的情况。下面是具体的修复步骤和优化后的代码：

核心修复：将字符串日期转为Date对象 #

首先，我们需要把从隐藏域获取的fromDate和toDate字符串转换成标准的Date对象，同时统一处理时间部分（避免因为时间戳差异导致的判断错误）：

$("[data-myLoop='loop']").each(function () {
    // 获取隐藏域的字符串日期
    var fromDateStr = $(this).find('[data-fromDate="fromDate"] input[type="hidden"]').val();
    var toDateStr = $(this).find('[data-toDate="toDate"] input[type="hidden"]').val();
    var userDate = $(this).find('[data-date="date"]').datepicker('getDate');

    // 先判断用户是否选择了日期
    if (!userDate) {
        alert("请选择日期");
        return;
    }

    // 将字符串转为Date对象，并清零时间部分（确保只比较日期）
    var fromDate = new Date(fromDateStr);
    fromDate.setHours(0, 0, 0, 0);
    
    var toDate = new Date(toDateStr);
    toDate.setHours(0, 0, 0, 0);

    // 统一用户选择的日期的时间部分
    userDate.setHours(0, 0, 0, 0);

    // 现在可以安全地比较Date对象了
    if (userDate < fromDate || userDate > toDate) {
        alert(`所选日期不在允许范围内，请选择${fromDate.toLocaleDateString()}至${toDate.toLocaleDateString()}之间的日期`);
    }
});

额外需要注意的细节 #

1. 变量名大小写一致性：你的Razor代码里是obj.toDate（小写t），但原JS里写的是ToDate（大写T），这会导致获取不到正确的值，上面的代码已经修正为统一的toDate。

2. 日期格式兼容性：如果你的数据库返回的日期字符串格式不是浏览器能直接解析的（比如是dd/MM/yyyy而不是yyyy-MM-dd），直接用new Date()可能会出错，这时候需要手动拆分日期部分来构造Date：

   // 示例：处理dd/MM/yyyy格式的字符串
   var parts = fromDateStr.split('/');
   var fromDate = new Date(parts[2], parts[1] - 1, parts[0]); // 月份是0-based（0=1月）
   fromDate.setHours(0, 0, 0, 0);
   

3. 表单提交拦截：如果要阻止不符合条件的表单提交，需要在表单的submit事件里做校验，返回false或者调用event.preventDefault()：

   $("form").submit(function(e) {
       var isValid = true;
       $("[data-myLoop='loop']").each(function () {
           // 复用上面的校验逻辑，发现不符合条件时设置isValid = false
           var fromDateStr = $(this).find('[data-fromDate="fromDate"] input[type="hidden"]').val();
           var toDateStr = $(this).find('[data-toDate="toDate"] input[type="hidden"]').val();
           var userDate = $(this).find('[data-date="date"]').datepicker('getDate');
   
           if (userDate) {
               var fromDate = new Date(fromDateStr);
               fromDate.setHours(0, 0, 0, 0);
               var toDate = new Date(toDateStr);
               toDate.setHours(0, 0, 0, 0);
               userDate.setHours(0, 0, 0, 0);
   
               if (userDate < fromDate || userDate > toDate) {
                   isValid = false;
                   return false; // 跳出循环
               }
           } else {
               isValid = false;
               return false;
           }
       });
       if (!isValid) {
           e.preventDefault();
           alert("部分日期不符合要求，请检查后重试");
       }
   });
   

为什么这样能解决问题？ #

当所有日期都转为统一的Date对象并清零时间部分后，JavaScript会直接比较它们的时间戳（从1970年1月1日以来的毫秒数），这样的比较逻辑完全符合我们对日期大小的预期，不会再出现字符串字典序导致的错误判断。

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