如何在ASP.NET ListView中为文本框添加jQuery DatePicker？

步骤1：引入必要的脚本与样式 #

要使用jQuery DatePicker，首先得确保页面加载了jQuery和jQuery UI的核心文件（包含样式表，避免日期选择器样式错乱），可以在页面<head>标签中添加：

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.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>

如果用本地资源，替换成项目内对应的文件路径即可。

步骤2：给日期文本框添加统一类名 #

ASP.NET ListView生成的控件ID会自动带前缀（比如lsvPermits_txtDate_0），直接用ID选择器不方便，所以给txtDate文本框加一个专属类名：

<asp:TextBox ID="txtDate" runat="server" CssClass="date-picker"></asp:TextBox>

步骤3：编写初始化DatePicker的脚本 #

在页面底部（或$(document).ready()回调中）添加脚本，选中所有带date-picker类的文本框并初始化日期选择器：

$(function() {
    $(".date-picker").datepicker({
        dateFormat: "yy-mm-dd", // 可按需修改日期格式
        changeMonth: true,
        changeYear: true
    });
});

额外修复：修正ItemTemplate的HTML嵌套错误 #

你原代码里ItemTemplate的第一个<td>嵌套了其他<td>，会导致布局错乱，修正后的结构如下：

<ItemTemplate>
    <tr runat="server" id="trItem" >
        <td valign="middle" style="white-space: nowrap; text-align:center;">
            <Asp:RadioButton runat="server" ID="rbtnPermit" />                                                                                               
        </td>
        <td valign="middle" style="white-space: nowrap; text-align:center;">
             <%# CheckNull(Eval("PERMIT_TYPE_DESC"))%>
        </td>
        <td valign="middle" style="white-space: nowrap; text-align:center;">
            <asp:TextBox ID="txtDate" runat="server" CssClass="date-picker"></asp:TextBox>
        </td>   
    </tr>
    <tr runat="server" ID="trMatchRow" >                           
    </tr>
</ItemTemplate>

完成以上操作后，ListView每一行的日期文本框点击后都会弹出jQuery DatePicker。

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