我怎麼能把日期選取器在Gridview中的編輯模式ASP .Net

我想更改gridview中的默認文本字段時處於編輯模式JavaScript的日期選擇器？我如何編碼？下面我怎麼能把日期選取器在Gridview中的編輯模式ASP .Net

碼（GridView的）：

<asp:GridView id="grdViewEmpList" runat="server" AutoGenerateColumns="false" PageSize="5" allowpaging="true" Font-Size="11px" OnRowDataBound="grdViewEmpList_RowDataBound" 
      GridLines="Both" ShowFooter="false" CssClass="gridview" CellPadding="4" Width="750px" OnRowEditing="grdViewEmpList_RowEditing" 
      PagerSettings-Mode="Numeric" AllowSorting="true" autopostback="true" ShowHeaderWhenEmpty="True" OnRowCancelingEdit="grdViewEmpList_RowCancelingEdit" 
      EmptyDataText="No record found" OnRowCreated="grdViewEmpList_RowCreated" OnPageIndexChanging="grdViewEmpList_PageIndexChanging" OnRowUpdating="grdViewEmpList_RowUpdating"> 
     <RowStyle Wrap="true" ForeColor="#666666" BorderColor="#FFFFFF" BorderWidth="0" BackColor="#CCCCFF" CssClass="gridview_alter"/> 
     <AlternatingRowStyle Wrap="true" ForeColor="#666666" BorderColor="#CCCCCC" BorderWidth="0" BackColor="#FFFFFF" CssClass="gridview_alter"/> 
     <Columns> 
      <asp:CommandField ShowEditButton="True" EditText="Edit" UpdateText="Save" ButtonType="Image" ItemStyle-HorizontalAlign="Center" HeaderText="Action" EditImageUrl="~/Images/dotNet/pencil.png" CancelImageUrl="~/Images/dotNet/edit-not-validated-icon.png" UpdateImageUrl="~/Images/dotNet/edit-validated-icon.png"/> 
      <asp:BoundField DataField="EMP_ID" readonly="true" ItemStyle-Height="20px" HeaderText="Employee ID" HeaderStyle-CssClass="allWidth100" /> 
      <asp:BoundField DataField="NAME" readonly="true" HeaderText="Name" HeaderStyle-CssClass="allWidth460" /> 
      <asp:BoundField DataField="EFF_DATE" HeaderText="Effective Date" HeaderStyle-CssClass="allWidth100" DataFormatString="{0:d}" ItemStyle-HorizontalAlign="Center" ControlStyle-CssClass="txtCommon allWidth80 txtCenter" /> 
     </Columns> 
     <PagerSettings Mode="Numeric" PageButtonCount="5" Position="Bottom" /> 
     <PagerStyle ForeColor="#FFCC33" HorizontalAlign="left" CssClass="gridview_pager"/> 
    </asp:GridView>

在HTML日期選取器的代碼，我希望把上面的GridView中EFF_DATE列：

<input type="text" id="txtEffDate" name="txtEffDate" class="txtCommon allWidth80" value="" readonly="readonly" /> 
<img alt="Calendar" src="../Images/DateTimePickerImg/cal.gif" style="cursor: pointer;" onclick="javascript: NewCssCal('txtEffDate')" />

來源

2013-12-09 Stuart

** FlopScientist **和** Jumpei Tanaka **的答案都是正確的。關鍵是使用''。 – Stuart

在這種情況下使用<asp:TemplateField>。

BoundField由數據綁定控件（如GridView）使用，以將字段的值顯示爲文本。所以，你也可以使用模板列時使用的相同目的的標籤，[即使用模板時，定義列的佈局]

所以，改變的加價領域：EFF_DATE從

<asp:BoundField DataField="EFF_DATE" HeaderText="Effective Date" 
     HeaderStyle-CssClass="allWidth100" DataFormatString="{0:d}" 
     ItemStyle-HorizontalAlign="Center" 
     ControlStyle-CssClass="txtCommon allWidth80 txtCenter" />

這樣：

<asp:TemplateField> 
    <ItemTemplate> 
     <asp:Label runat="server" ID="lnl1" 
      Text='<%#DataBinder.Eval(Container.DataItem, "EFF_DATE").ToString()%>'> 
     </asp:Label> 
    </ItemTemplate> 
    <EditItemTemplate> 
      <input type="text" id="txtEffDate" name="txtEffDate" 
       class="txtCommon allWidth80" value="" readonly="readonly" /> 
      <img alt="Calendar" src="../Images/spain.png" style="cursor: pointer;" 
       onclick="javascript: NewCssCal('txtEffDate')" /> 
    </EditItemTemplate> 
    </asp:TemplateField>

來源

2013-12-09 05:11:21

您可以添加日期選取器使用如下所示的TemplateField。

  <asp:TemplateField HeaderText="Effective Date" 
       SortExpression="EFF_DATE" > 
       <ItemTemplate> 
        <asp:Label ID="lblEffDate" runat="server" Text='<%#Bind("EFF_DATE") %>' /> 
       </ItemTemplate> 
       <EditItemTemplate> 
        <asp:TextBox ClientIDMode="Static" ID="txtEffDate" runat="server" Text='<%#Bind("EFF_DATE") %>' /> 
        <img alt="Calendar" src="../Images/DateTimePickerImg/cal.gif" style="cursor: pointer;" onclick="javascript: NewCssCal('txtEffDate')" /> 
       </EditItemTemplate> 
      </asp:TemplateField>

來源

2013-12-09 05:11:18 Jumpei

您可以使用模板列中添加日期選擇器中編輯模式。一個自定義的類添加到文本框，

<asp:TemplateField HeaderText="Effective Date" SortExpression="EFF_DATE" > 
    <ItemTemplate> 
     <asp:Label ID="lblEffDate" runat="server" Text='<%#Bind("EFF_DATE") %>' /> 
    </ItemTemplate> 
    <EditItemTemplate> 
     <asp:TextBox ClientIDMode="Static" ID="txtEffDate" runat="server" Text='<%#Bind("EFF_DATE") %>' CssClass="Datepicker"/> 
    </EditItemTemplate> 
</asp:TemplateField>

通過使用你的GridView ID可以綁定日期選擇您的文本框中。

$(function() { 
     var $gv = $("table[id$=grdViewEmpList]"); 
     var $rows = $("> tbody > tr:not(:has(th, table))", $gv); 
     var $inputs = $(".Datepicker", $rows); 
     $inputs.datepicker(); 
});

來源

2016-07-21 10:17:40 Nirmal

我怎麼能把日期選取器在Gridview中的編輯模式ASP .Net

回答

相關問題