Question

我在ASP.NET gridview的模板字段中有几个文本框，我想使用datetime picker（日期和时间部分）。由于ASP.NET生成控件的前端ID的方式，选择文本框的最简单方法是按类。让文本框进行日期时间选择器并不难：

问题是，每次datetimepicker打开时，它都会清除文本框中的预填充值，而datetimepicker不会默认为文本框中的日期时间。如果有一个文本框和/或我事先有ClientID，我可以相对容易地设置defaultValue。但是文本框的实际HTML ClientID并不以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">&nbsp;</th><th scope="col">Start Date</th><th scope="col">End Date</th>
            </tr>
            <tr>
                <td>Update &nbsp;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>

Answer 1

使用简化的HTML和工作的JSFiddle，直到我注意到我正在运行jquery-ui-1.9.1.js并且jsfiddle使用jquery-ui-1.8.16.js时，我才能使它工作。切换到旧版本有效。

jQuery Trent Richardson的DateTimePicker：使用类选择器将选择器设置为文本框中的值

1 个答案: