CalendarExtender with BoundField

假設在GridView中有個輸入欄位，格式為日期:

<asp:BoundField DataField="hireDate" HeaderText="Date Hired" />

接著加入 AjaxControlToolkit 控制項:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

加入 TextBox1

<p>
  <asp:TextBox ID="TextBox1" runat="server" runat="server" />
</p>

將 TextBox1 隱藏:
css:

p#content_GridView1_DetailsView1_TextBox1 { display:none; }  

觸發按鈕:

<asp:ImageButton ID="ImageButton1" runat="server" />

設定 CalendarExtender :

<asp:CalendarExtender ID="CalendarExtender1" runat="server" Format="yyyy-MM-DD"  TargetControlID="TextBox1" PopupButtonID="ImageButton1" CssClass="myClass"></asp:CalendarExtender>

 TargetControlID: 顯示日期的欄位 ID
 PopupButtonID: 觸發日曆的按鈕 ID

 使用 jQuery 變更 BoundField id 為 TextBox1 :

 $("input[type=text]:eq(0)").attr("id", "content_GridView1_DetailsView1_TextBox1");