jQuery Datepicker的dateFormat、altFormat、altField配置及yymmdd格式日期获取问题

嘿，看了你的问题和代码，你在jQuery Datepicker的格式配置和日期值获取上踩了几个典型的小坑，我来帮你一步步解决~

先搞清楚你遇到的核心问题 #

1. altField配置错误：你把altField设成了日期选择器本身（比如#start_date_picker），这直接导致altFormat格式的日期覆盖了dateFormat的显示内容，完全搞反了两者的作用！
2. 日期值获取方式不对：用$(this).datepicker('getDate')拿到的是原生Date对象，不是你要的yymmdd格式字符串；
3. 对配置覆盖的误解：datepicker("option", "minDate", xxx)只会修改minDate这一个配置，不会覆盖dateFormat、altFormat这些其他设置，之前的异常完全是altField配置错误导致的。

解决方案分步走 #

1. 修正altField的正确用法

altField的作用是把altFormat格式的日期存到另一个独立元素里，而绑定Datepicker的元素专门显示dateFormat的格式。如果你需要保留altFormat的存储，就新增一个隐藏的input：

<!-- 显示用的日期选择器 -->
<input type="text" id="start_date_picker" placeholder="选择开始日期">
<!-- 存altFormat格式的隐藏元素 -->
<input type="hidden" id="start_alt_date">

<input type="text" id="end_date_picker" placeholder="选择结束日期">
<input type="hidden" id="end_alt_date">

然后修正Datepicker的初始化配置：

$("#start_date_picker").datepicker({
  dateFormat: "MM dd, yy", // 用户看到的显示格式
  altFormat: "yymmdd",     // 要存储的目标格式
  altField: "#start_alt_date" // 存目标格式的元素
});

$("#end_date_picker").datepicker({
  dateFormat: "MM dd, yy",
  altFormat: "yymmdd",
  altField: "#end_alt_date"
});

这样用户看到的是December 18, 2024这种友好格式，隐藏元素里自动存着20241218，完美分离显示和存储需求。

2. 正确获取yymmdd格式的startDate和endDate

如果你不需要额外存储altFormat的日期，直接用jQuery UI提供的$.datepicker.formatDate()方法，把getDate()拿到的Date对象转成目标格式即可，这是最灵活可靠的方式：

$('#start_date_picker').on("change",function(){ 
  // 先拿到原生Date对象（用来设置minDate/maxDate）
  const startDateObj = $(this).datepicker('getDate');
  // 转成yymmdd格式的字符串
  const startDate = $.datepicker.formatDate("yymmdd", startDateObj);
  
  // 设置结束日期的最小限制（这里必须传Date对象，不能传字符串）
  $("#end_date_picker").datepicker("option", "minDate", startDateObj); 
  
  console.log("开始日期（yymmdd）：", startDate);
}) 

$('#end_date_picker').on("change",function(){ 
  const endDateObj = $(this).datepicker('getDate');
  const endDate = $.datepicker.formatDate("yymmdd", endDateObj);
  
  $("#start_date_picker").datepicker("option", "maxDate", endDateObj); 
  
  console.log("结束日期（yymmdd）：", endDate);
});

如果用了altField，也可以直接从隐藏元素里取值：const startDate = $("#start_alt_date").val();，两种方式都可行。

3. 关于配置覆盖的澄清

之前你觉得设置minDate会覆盖其他配置，其实完全不会——datepicker("option", "key", value)只会修改指定的单个配置项，其他配置会原封不动保留。之前的显示异常只是因为altField设成了自身，导致显示内容被替换了而已。

完整修正后的代码示例 #

HTML

<div style="margin: 10px;">
  <label>开始日期：</label>
  <input type="text" id="start_date_picker">
</div>
<div style="margin: 10px;">
  <label>结束日期：</label>
  <input type="text" id="end_date_picker">
</div>

JavaScript

$(function() { 
  // 初始化日期选择器
  $("#start_date_picker").datepicker({
    dateFormat: "MM dd, yy",
    altFormat: "yymmdd",
    altField: "#start_alt_date" // 不需要的话可以直接删除这一行
  });
  
  $("#end_date_picker").datepicker({
    dateFormat: "MM dd, yy",
    altFormat: "yymmdd",
    altField: "#end_alt_date" // 不需要的话可以直接删除这一行
  });

  // 开始日期变化事件
  $('#start_date_picker').on("change",function(){ 
    const startDateObj = $(this).datepicker('getDate');
    const startDate = $.datepicker.formatDate("yymmdd", startDateObj);
    $("#end_date_picker").datepicker("option", "minDate", startDateObj); 
    console.log("开始日期（yymmdd）：", startDate);
  }) 

  // 结束日期变化事件
  $('#end_date_picker').on("change",function(){ 
    const endDateObj = $(this).datepicker('getDate');
    const endDate = $.datepicker.formatDate("yymmdd", endDateObj);
    $("#start_date_picker").datepicker("option", "maxDate", endDateObj); 
    console.log("结束日期（yymmdd）：", endDate);
  });
});

备注：内容来源于stack exchange，提问作者user5853892