jQuery Trent Richardson的DateTimePicker：將選擇器設置爲使用類選擇器的文本框中的值

我在ASP.NET gridview的templatefield中有幾個文本框，我想使用datetime picker（日期和時間部分）。 ASP.NET生成控件的前端ID，按類別選擇文本框的最簡單方法是。讓文本框做日期時間選擇器並不困難：jQuery Trent Richardson的DateTimePicker：將選擇器設置爲使用類選擇器的文本框中的值

問題是，每當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>

來源

2013-01-04 Andrew Buis

嘗試抓取您的ASP生成的HTML並查看是否有干擾這些事情的東西。這將是一個很好的調試方法。如果你仍然陷入困境，你可能會在你的問題中發佈該HTML（當然，儘可能簡化）。 – BobS

添加了簡化的HTML。 –

玩弄簡化的HTML和工作的[JSFiddle]（http://jsfiddle.net/LmUnr/），我不能得到它的工作，直到我注意到我正在運行jquery-ui-1.9.1.js和jsfiddle使用jquery-ui-1.8.16.js。切換到舊版本的作品。 –

-1

與簡化的HTML和工作的jsfiddle玩的時候，我無法得到它的工作，直到我發現我是運行jquery-ui-1.9.1.js和jsfiddle使用jquery-ui-1.8.16.js。切換到舊版本的作品。

來源

2013-04-04 02:16:45

jQuery Trent Richardson的DateTimePicker：將選擇器設置爲使用類選擇器的文本框中的值

回答

相關問題