jQuery Datepicker显示日期但.val()为空，如何获取最新选中值？

嘿，我完全懂你遇到的这个糟心问题——动态表格里的Datepicker选完新日期后，不管用啥方法拿的都是旧值，这确实挺让人挠头的。结合你的场景（动态行、MVC前端），我来给你拆解下原因和解决方案：

核心问题分析 #

jQuery UI Datepicker的change事件触发时机有点坑：它有时候会在input的value真正更新之前就触发，这就导致你在外部监听change事件时，拿到的还是旧值。另外，你是动态生成的表格行，直接绑定Datepicker的方式可能没生效，或者事件没正确关联到新生成的元素上。

具体解决方案 #

1. 用onSelect事件捕获日期变化（最可靠）

Datepicker自带的onSelect事件是专门用来监听日期选中/修改的，它会在值更新完成后触发，而且直接给你返回选中的日期字符串。同时因为是动态行，我们要用事件委托的方式来初始化Datepicker，确保新生成的行也能生效：

// 用事件委托给动态生成的datepicker_A初始化并绑定onSelect
$(document).on('focus', 'input[name$="datepicker_A"]', function() {
    // 避免重复初始化Datepicker
    if (!$(this).data('datepicker')) {
        $(this).datepicker({
            dateFormat: 'd/M/y', // 这里要和你实际使用的格式一致
            onSelect: function(selectedDate) {
                // 这里的selectedDate就是最新选中的日期字符串
                console.log('最新日期（直接获取）:', selectedDate);
                
                // 或者在这里用$(this).val()也能拿到最新值
                console.log('input的最新value:', $(this).val());

                // 接下来执行你的业务逻辑：检查Comments字段
                const parentRow = $(this).closest('tr');
                const subRow = parentRow.next('.sub-row'); // 假设子行有这个类
                const commentsInput = subRow.find('input[name$="Comments"]');

                // 示例：如果选中了日期，要求Comments必须填写且满足长度
                if (selectedDate) {
                    commentsInput.prop('required', true);
                    // 可以在这里添加长度校验逻辑
                }
            }
        });
    }
});

2. 正确使用getDate方法

如果你需要在onSelect之外的地方获取最新值，比如在填写Comments时校验A Datepicker的日期，那要注意datepicker("getDate")返回的是Date对象，不是字符串，你需要用$.datepicker.formatDate转成和显示一致的格式：

// 获取指定行的datepicker_A最新值
const dateObj = $(parentRow).find('input[name$="datepicker_A"]').datepicker("getDate");
if (dateObj) {
    const dateValue = $.datepicker.formatDate('d/M/y', dateObj); // 格式要和初始化时一致
    console.log('格式化后的最新日期:', dateValue);
}

3. 避免错误的元素选择方式

你尝试的第三种方法document.getElementById('datepicker_A').val()是错的——原生DOM元素没有val()方法，应该用document.getElementById('datepicker_A').value，不过因为是动态行，ID可能重复，所以更推荐用name属性结合父行来查找，就像你之前做的那样。

额外注意点 #

• 确保你的dateFormat在初始化Datepicker和解析/格式化时完全一致，不然会出现解析错误或者值不匹配的情况。
• 动态生成行后，不需要重复初始化Datepicker，上面的代码里用!$(this).data('datepicker')做了判断，避免重复绑定导致的异常。

这样调整后，你应该就能稳定获取到Datepicker的最新值了，然后就能顺利实现你的校验逻辑啦！

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