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

【问题标题】：jQuery Trent Richardson's DateTimePicker: Set picker to value in textbox using class selectorjQuery Trent Richardson 的 DateTimePicker：使用类选择器将选择器设置为文本框中的值
【发布时间】：2013-01-04 17:51:57
【问题描述】：

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

问题是，每次打开日期时间选择器时，它都会从文本框中清除预填充的值，并且日期时间选择器不会默认为文本框中存在的日期时间。如果有一个文本框和/或我事先有 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">&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>

【问题讨论】：

尝试抓取您的 ASP 生成的 HTML 并查看是否存在干扰这些内容的内容。那将是一个很好的调试方法。如果您仍然卡住，您可以在您的问题中发布该 HTML（当然，尽可能简化）。
添加了简化的 HTML。
玩弄简化的 HTML 和工作的 JSFiddle，直到我注意到我正在运行 jquery-ui-1.9.1.js 并且 jsfiddle 使用 jquery-ui 之前，我无法让它工作-1.8.16.js。切换到旧版本有效。
我对 JQuery 还是有点陌生。我不知道这是否是我如何调用 datetimepicker 的错误，或者即使选择器默认为文本框中的值，因为据我所知，它没有明确说明。
这个jsfiddle.net/b5KMg/1 小提琴表明您可以在文本框中有一个初始日期，并且打开日期选择器不会让它消失。我不确定为什么它会在你的情况下消失。

标签： jquery asp.net jquery-ui

【解决方案1】：

玩弄简化的 HTML 和工作的 JSFiddle，直到我注意到我正在运行 jquery-ui-1.9.1.js 并且 jsfiddle 使用 jquery-ui-1.8.16.js 之前，我无法让它工作。切换到旧版本有效。

【讨论】：