如何为GridView中的BoundField添加jQuery日期选择器？

一、简便的脚本调整方案（无需修改GridView列结构） #

当GridView进入编辑模式时，BoundField会自动生成TextBox，其ID格式为[GridViewID]_[FieldName]_[RowIndex]（比如VendorView_effDt_0）。你可以通过优化选择器+处理回发绑定的方式解决问题：

修改后的脚本 #

<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
    // 封装日期选择器初始化逻辑
    function initDatePickers() {
        // 精准定位目标GridView内的effDt编辑框
        $("#VendorView input[id*='effDt']").datepicker({
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: 'images/calendar.png'
        });
        // 保留原有的TextBox2日期选择器
        $("[id*=TextBox2]").datepicker({
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: 'images/calendar.png'
        });
    }

    // 页面初始加载时执行
    $(function () {
        initDatePickers();
    });

    // 监听ASP.NET回发事件（编辑模式切换、分页等操作后重新绑定）
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function () {
        initDatePickers();
    });
</script>

关键说明 #

• 用$("#VendorView input[id*='effDt']")缩小选择范围，避免影响页面其他输入框
• 封装初始化函数，配合PageRequestManager处理回发后的控件重新绑定（因为进入编辑模式是回发操作，初始的$(function)只会执行一次）

二、改用TemplateField方案（更可靠，扩展性强） #

如果需要长期维护或自定义编辑界面，建议将BoundField替换为TemplateField，显式定义编辑控件的ID：

修改GridView列代码 #

<asp:TemplateField HeaderText="Effective Date" SortExpression="Effective Date">
    <ItemTemplate>
        <%# Eval("effDt") %>
    </ItemTemplate>
    <EditItemTemplate>
        <asp:TextBox ID="txtEffDt" runat="server" Text='<%# Bind("effDt") %>'></asp:TextBox>
        <!-- 可按需添加验证控件 -->
    </EditItemTemplate>
</asp:TemplateField>

对应脚本调整 #

<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
    function initDatePickers() {
        $("[id*=txtEffDt]").datepicker({
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: 'images/calendar.png'
        });
        $("[id*=TextBox2]").datepicker({
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: 'images/calendar.png'
        });
    }

    $(function () {
        initDatePickers();
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function () {
        initDatePickers();
    });
</script>

关键说明 #

• 控件ID完全可控，选择器更稳定，避免自动生成ID带来的不确定性
• 可直接在EditItemTemplate内添加验证控件、样式类等，扩展性更强

方案选择建议 #

• 若只是临时快速解决问题，优先用脚本调整方案，无需修改GridView列结构
• 若需要长期维护或自定义编辑界面，推荐TemplateField方案，代码可读性和扩展性更好

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