单击GridView的TextBox，显示Calendar

ASP.NET GridView中集成日历控件

最新推荐文章于 2025-11-28 04:56:28 发布

最新推荐文章于 2025-11-28 04:56:28 发布 · 151 阅读

文章标签：

#javascript #c# #ViewUI

本文介绍如何在ASP.NET的GridView控件中集成日历控件以实现日期选择功能。通过自定义模板字段，结合JavaScript实现日历显示隐藏效果，并在选择日期后更新文本框中的值。

ASP

function ToggleVisiblity(ShowHideButton, Calendar)
{
var calendar = self.document.getElementById(Calendar);
if (calendar.style.display == 'none')
calendar.style.display = 'block';
else
calendar.style.display = 'none';
}

</script>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="794px" onrowdatabound="GridView1_RowDataBound" >
<Columns>
<asp:TemplateField HeaderText="进货日期">
<EditItemTemplate>
</EditItemTemplate>
<ItemTemplate>
<asp:TextBox ID="CalendarTB" runat="server" CssClass="ShowHideButton" Text="点击选择日期"></asp:TextBox>
<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged" style="display:none" ></asp:Calendar>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
没有相关数据！
</EmptyDataTemplate>

</asp:GridView>

ASP.C#

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
TextBox btnShowHide = (TextBox)e.Row.FindControl("CalendarTB");
Calendar OrderCalendar = (Calendar)e.Row.FindControl("Calendar1");
string ShowHideScript = "ToggleVisiblity(this,'" + OrderCalendar.ClientID + "');return false";
btnShowHide.Attributes.Add("onfocus", ShowHideScript);
}
}
protected void Calendar1_SelectionChanged(object sender,EventArgs e)
{
Calendar OrderCalendar = (Calendar)sender;
TextBox txtOrderDate = (TextBox)(OrderCalendar.Parent.FindControl("CalendarTB"));
txtOrderDate.Text = OrderCalendar.SelectedDate.ToShortDateString();
}