ASP.NETグリッドビューのテンプレートフィールドに日時ピッカー（日付と時刻の両方の部分）を使用するテキストボックスがいくつかあります。ASP.NETがコントロールのフロントエンドIDを生成する方法により、選択する最も簡単な方法です。テキストボックスはクラスごとです。テキストボックスに日時ピッカーを実行させるのは難しくありませんでした。
問題は、datetimepickerが開くたびに、テキストボックスから事前入力された値がクリアされ、datetimepickerがデフォルトでテキストボックスに存在する日時に設定されないことです。テキストボックスが1つしかない場合や、事前にClientIDを持っている場合は、defaultValueを比較的簡単に設定できます。ただし、テキストボックスの実際のHTMLクライアントIDはasp idで終わっていないため、endswith関数（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>