单击ASP.NET日历控件单元格选择日期

最新推荐文章于 2025-10-18 14:21:47 发布

原创最新推荐文章于 2025-10-18 14:21:47 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net #日历 #calendar #server #xhtml #object

.NET常用控件专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种改进ASP.NET日历控件用户体验的方法，通过添加单元格点击事件，使得用户可以直接点击日期单元格来选择日期，尤其在数字较小的情况下更加方便快捷。

单击ASP.NET日历控件老是选择数字才能选择这个日期，当数字很小的时候选择很不方便，以下方式可以单击单元格来选择日期：

Default.aspx代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebAppCalendar._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:Calendar ID="Calendar1" runat="server" Height="212px" ondayrender="Calendar1_DayRender" Width="390px"></asp:Calendar> </div> </form> </body> </html>

Default.aspx.cs代码：

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebAppCalendar { public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Calendar1_DayRender(object sender, DayRenderEventArgs e) { //为日历单元格添加onClick事件 e.Cell.Attributes.Add("onClick", e.SelectUrl); //鼠标变为手型 e.Cell.Attributes.Add("onmouseover", "if(true) this.style.cursor='hand';"); } } }

运行结果：