我在 ASP.NET gridview 的模板字段中有几个文本框，我想使用日期时间选择器（日期和时间部分）。由于 ASP.NET 生成控件的前端 ID 的方式，最简单的选择方法文本框是按类别的。让文本框执行日期时间选择器并不难：
问题是，每次打开 datetimepicker 时，它都会从文本框中清除预填充的值，并且 datetimepicker 不会默认为文本框中存在的 datetime。如果有一个文本框和/或我事先有 ClientID，我可以相对容易地设置 defaultValue。但是文本框的实际 HTML ClientID 不以 asp id 结尾，因此我不能使用 endwith 函数 ( ContentPlaceHolder1_GridView1_tbStartDate_0) 并且我不能使用<%# tbStartDate.ClientID %>，因为文本框仅在按下更新按钮后生成。但我不确定如何使用 jQuery 类选择器来处理它。
为了方便起见，我让 ASP.NET 将日期时间格式化为 datetimepicker 使用的默认格式。
简化页面如下：
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<link rel="stylesheet" media="all" type="text/css" href="Styles/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css">
</Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
jQuery(document).ready(function () {
$(".dateTimePickerClass").datetimepicker();
});
<asp:GridView ID="gridview1" runat="server" DataSourceID="SQLDataSource1">
<asp:CommandField ShowEditButton="True" />
<asp:TemplateField HeaderText="Start Date" SortExpression="startDate">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("startDate") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox CssClass="dateTimePickerClass" ID="tbStartDate" runat="server"
Text='<%# Bind("startDate", "{0:MM/dd/yyyy H:mm}") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="End Date" SortExpression="endDate">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("endDate") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox CssClass="dateTimePickerClass" ID="endDate" runat="server"
Text='<%# Bind("endDate", "{0:MM/dd/yyyy H:mm}") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</GridView>
<asp:SQLDataSource id="SQLDataSource1" runat="server" />
</Content>
生成的html：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<link rel="stylesheet" media="all" type="text/css" href="Styles/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css">
</head>
<body>
<form id="form1">
<script type="text/javascript">
jQuery(document).ready(function () {
$(".dateTimePickerClass").datetimepicker({ onClose: function (value) {$('input.datetime').val(value);}});
});
</script>
<div>
<table cellspacing="0" rules="all" border="1" id="ContentPlaceHolder1_gvHolds" style="border-collapse:collapse;">
<tr>
<th scope="col"> </th><th scope="col">Start Date</th><th scope="col">End Date</th>
</tr>
<tr>
<td>Update Cancel</td>
<td><input name="ctl00$ContentPlaceHolder1$gvHolds$ctl02$tbStartDate" type="text"
value="01/04/2013 10:43" id="ContentPlaceHolder1_gvHolds_tbStartDate_0" class="dateTimePickerClass" />
</td>
<td><input name="ctl00$ContentPlaceHolder1$gvHolds$ctl02$tbEndDate" type="text"
id="ContentPlaceHolder1_gvHolds_tbEndDate_0" class="dateTimePickerClass" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>