JQuery-UI DatePicker无法正确设置minDate与maxDate问题求助

jQuery UI DatePicker 的 minDate 和 maxDate 参数如果直接传入 dd/mm/yy 格式的字符串，会默认按照 mm/dd/yy（月/日/年）的规则解析，导致日期识别完全错误。比如你传入的 "01/09/24" 会被解析为2024年1月9日，而非预期的2024年9月1日；"30/09/24" 因不存在“30月”会被错误转译为其他日期，最终可选范围完全偏离预期。

直接用 new Date(firstStr) 也无法解决问题，因为原生 JavaScript 的 Date 构造函数对 dd/mm/yy 格式的解析行为不一致，多数浏览器会返回无效日期，让 DatePicker fallback 到默认范围，问题反而更严重。

使用 jQuery UI DatePicker 内置的 $.datepicker.parseDate() 方法，根据你指定的 dd/mm/yy 格式来正确解析字符串，得到标准的 Date 对象后，再传给 minDate 和 maxDate。

同时注意：setDate 参数需要传入 Date 对象而非字符串，需把 var today=Date(); 改为 var today = new Date();。

<!DOCTYPE html>
<html class="no-js" lang="it" >
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Stats</title>
<link rel="stylesheet" href="css/jquery-ui.css">    
<link rel="stylesheet" href="css/jquery-ui.theme.css">  

<style>
body{background:#444;}

P.statP {
    display:inline-block;
    width:150px; 
    color:#fff; 
    border:1px solid #ff8;
    margin:0;
        text-align:center;
    }
    
Input.statI {
    width:148px;
    text-align:center;
}

DIV.statDiv{
    float:left;
    margin-left:10px;
    width:320px; 
    border:1px solid #faa;  
}

Label.statLbl {
    display:inline-block;
    width:150px; 
    color:#f84;
    }
    </style>    
</head>

<body>
    
<div class="sfondoStat">                                             
      <div class="statDiv">     
            <label class="statLbl" for="datepickerFrom">&nbsp;Start at: </label>            
            <input class="statI" type="text"  id="datepickerFrom">
            <p class="statP" id="date1"></p>
            <p class="statP">&nbsp;<span id="d1"></p>
        </div>
        
      <div class="statDiv">     
            <label class="statLbl"  for="datepickerTo">&nbsp;End at: </label>                       
            <input  class="statI" type="text"  id="datepickerTo">   
            <p class="statP"  id="date2"></p>
            <p class="statP">&nbsp;<span id="d2"></p>
      </div>
</div>

<!-- ======================== scripts  ============================= -->

<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery-ui.js"></script>

<script type="text/javascript">
    var today = new Date();
    var format = "dd/mm/yy";
    var firstStr="01/09/24";
    var lastStr="30/09/24";
    // 按指定格式解析日期字符串为Date对象
    var minDateObj = $.datepicker.parseDate(format, firstStr);
    var maxDateObj = $.datepicker.parseDate(format, lastStr);
    var startDate = "";
    var endDate = "";

    $(document).ready(function(){   

        $("#date1").text("min: "+firstStr);
        $("#date2").text("max: "+lastStr);

        $.datepicker.setDefaults({
            dateFormat: format,
            changeMonth: true,
            changeYear: true,   
          showOn: "focus",
            numberOfMonths: 1,  
            minDate: minDateObj,
            maxDate: maxDateObj,
            setDate: today 
        });


        $("#datepickerFrom").datepicker({     
            onSelect: function(startDateStr){
              $("#d1").text(startDateStr);
              // 解析选中的日期，再设置给结束日期选择器
              var parsedStart = $.datepicker.parseDate(format, startDateStr);
              $("#datepickerTo").datepicker("option","minDate", parsedStart);
            }
        });
              
              
        $("#datepickerTo").datepicker({
            onSelect: function(endDateStr){
                $("#d2").text(endDateStr)          
            }
        });
            
    });
      
</script>

  </body>
</html>

1. 新增 $.datepicker.parseDate(format, dateStr) 方法，确保按指定的dd/mm/yy格式解析日期字符串，得到正确的Date对象
2. 修正 var today=Date(); 为 var today = new Date();，传入合法的Date对象给setDate参数
3. 在onSelect回调中，同样用parseDate解析选中的日期字符串，避免设置另一个日期选择器的minDate时再次出现解析错误

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