如何从jQuery UI Datepicker的备用字段中获取日期？

你的核心问题在于重复初始化Datepicker以及依赖隐藏输入框的change事件（该事件不会被Datepicker自动触发），可以通过以下方式修复：

问题分析 #

• 每次点击按钮都重新初始化Datepicker，会导致事件重复绑定、功能异常
• 隐藏输入框的change事件不会在Datepicker更新其值时自动触发，因此无法通过该事件捕获日期变化

修复后的代码 #

HTML部分（无需修改）

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<button class="openDatePicker">Calendar</button>
<input type="text" style="display: none;" id="popupDatepicker">
<input type="hidden" id="alternateDateField" size="30">

JavaScript部分

// 只初始化一次Datepicker，避免重复绑定
$('#popupDatepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    altField: "#alternateDateField",
    altFormat: "DD, d MM, yy",
    // 使用Datepicker自带的onSelect事件捕获日期选择动作
    onSelect: function(dateText, inst) {
        // 直接从备用输入框获取格式化后的日期
        var fullDate = $('#alternateDateField').val();
        console.log(fullDate);
        // 或者直接使用dateText结合altFormat自行格式化（可选）
        // var formattedDate = $.datepicker.formatDate("DD, d MM, yy", new Date(dateText));
        // console.log(formattedDate);
    }
});

// 按钮点击触发日历显示
$(document).on('click','.openDatePicker',function(){
    $('#popupDatepicker').datepicker("show");
});

关键修改点 #

1. 提前初始化Datepicker：将初始化代码移出点击事件，确保只执行一次，避免重复绑定事件导致的异常
2. 使用onSelect回调：这是Datepicker提供的官方事件，会在用户选择日期后立即触发，能可靠捕获日期变化
3. 简化日历触发逻辑：直接调用datepicker("show")方法显示日历，无需先show再focus再hide的冗余操作

这样就能在用户选择日期时，实时获取到备用输入框中的格式化日期了。

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