GridView中动态生成TextBox的jQuery起止日期DatePicker问题

嘿，我懂你遇到的麻烦了——在GridView里动态生成的StartDate和EndDate文本框，DatePicker没法正常实现日期联动，对吧？这其实是因为GridView渲染后，每行控件的ClientID都是动态生成的，你原来用的$("#<%=txtStartTime.ClientID%>")只能匹配第一行的控件，后面的行根本找不到对应的元素。下面给你几个靠谱的解决办法：

给GridView里的StartDate和EndDate文本框统一加上CSS类，比如class="start-date"和class="end-date"，然后通过类选择器初始化DatePicker，再利用DOM层级关系找到同行的对应控件。

示例代码：

$(document).ready(function () {
    // 初始化所有StartDate日期选择器
    $(".start-date").datepicker({
        changeMonth: true,
        changeYear: true,
        minDate: 0,
        maxDate: "+365D",
        onSelect: function(selectedDate) {
            // 找到当前行对应的EndDate控件
            var $endDateInput = $(this).closest("tr").find(".end-date");
            // 设置EndDate的最小可选日期为选中的StartDate
            $endDateInput.datepicker("option", "minDate", selectedDate);
        }
    });

    // 初始化所有EndDate日期选择器
    $(".end-date").datepicker({
        changeMonth: true,
        changeYear: true,
        maxDate: "+365D"
    });
});

这里的关键是closest("tr")——它能快速定位到当前日期框所在的GridView行，再通过find(".end-date")找到同行的结束日期框，完美解决动态行的关联问题。

如果你的GridView放在UpdatePanel里，异步回发后新生成的行不会自动绑定DatePicker事件，这时候需要在页面加载（包括异步回发后）时重新初始化：

// 封装初始化逻辑成函数
function initDatePickers() {
    $(".start-date").datepicker({
        changeMonth: true,
        changeYear: true,
        minDate: 0,
        maxDate: "+365D",
        onSelect: function(selectedDate) {
            var $endDateInput = $(this).closest("tr").find(".end-date");
            $endDateInput.datepicker("option", "minDate", selectedDate);
        }
    });

    $(".end-date").datepicker({
        changeMonth: true,
        changeYear: true,
        maxDate: "+365D"
    });
}

// 页面首次加载和异步回发后都执行初始化
$(document).ready(initDatePickers);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(initDatePickers);

尽量不要依赖<%=txtStartTime.ClientID%>这种方式，因为GridView每行的控件ID都会带行号后缀（比如GridView1_txtStartTime_0、GridView1_txtStartTime_1），只能匹配第一行，后续行的控件根本找不到。用类选择器是最稳定的方案。

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