javascript 如何将日期选择器放在 Gridview 中的编辑模式 ASP .Net
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20462286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How Can I put Date Picker in Gridview in edit mode ASP .Net
提问by Stuart
I want to change the default text field in a gridview when in edit mode to a javascript date picker? How can I code it?
我想在编辑模式下将 gridview 中的默认文本字段更改为 javascript 日期选择器？我该如何编码？
Code below (Gridview):
下面的代码（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>
Code of the Date Picker in HTML which I want to put in above gridview in EFF_DATEcolumn:
我想在EFF_DATE列中放在 gridview 上方的 HTML 中的日期选择器代码：
<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')" />
采纳答案by R.C
Use the <asp:TemplateField>in this case.
使用<asp:TemplateField>在这种情况下。
The BoundFieldis used by data-bound controls such as GridView to display the value of a field as text. So you can also use a Label for the same purpose when using TemplateField, [ i.e. when using Templates to define the layout of your Columns ]
在BoundField使用由诸如GridView的数据绑定控件显示一个场作为文本的值。因此，在使用 TemplateField 时，您也可以将标签用于相同的目的，[ 即在使用模板定义列的布局时 ]
So, change the Markup for your field: EFF_DATEfrom
因此，更改您的字段的标记：EFF_DATE从
<asp:BoundField DataField="EFF_DATE" HeaderText="Effective Date"
HeaderStyle-CssClass="allWidth100" DataFormatString="{0:d}"
ItemStyle-HorizontalAlign="Center"
ControlStyle-CssClass="txtCommon allWidth80 txtCenter" />
to this:
对此：
<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>
回答by Nirmal
You can Use TemplateField to add the datepicker in editmode. Add a custom class to the textbox,
您可以使用 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") %>' CssClass="Datepicker"/>
</EditItemTemplate>
</asp:TemplateField>
By using your gridview ID you can bind datepicker to your textbox.
通过使用您的 gridview ID，您可以将日期选择器绑定到您的文本框。
$(function () {
var $gv = $("table[id$=grdViewEmpList]");
var $rows = $("> tbody > tr:not(:has(th, table))", $gv);
var $inputs = $(".Datepicker", $rows);
$inputs.datepicker();
});
回答by Jumpei
You can add a date picker to use TemplateFieldlike below.
您可以添加一个日期选择器来使用，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>
