日历控件是一个功能丰富的web控件,它提供了以下功能:
日历控件的基本语法是:
<asp:calender id = "calendar1" runat = "server">
</asp:calender>
日历控件具有许多属性和事件,使用它们可以自定义控件的操作和显示。 下表提供了calendar
控件的一些重要属性:
编号 | 属性 | 描述 |
---|---|---|
1 | caption |
获取或设置日历控件的标题。 |
2 | captionalign |
获取或设置标题的对齐方式。 |
3 | cellpadding |
获取或设置数据与单元格边框之间的空格数。 |
4 | cellspacing |
获取或设置单元格之间的空间。 |
5 | dayheaderstyle |
获取显示星期几的部分的样式属性。 |
6 | daynameformat |
获取或设置一周中的几天的格式。 |
7 | daystyle |
获取显示的月份中日期的样式属性。 |
8 | firstdayofweek |
获取或设置要在第一列中显示的是星期几。 |
9 | nextmonthtext |
获取或设置下个月导航控件的文本。 默认值是字符:> |
10 | nextprevformat |
获取或设置下个月和上个月的导航控件的格式。 |
11 | othermonthdaystyle |
获取日历控件上不在显示的月份中的日子的样式属性。 |
12 | prevmonthtext |
获取或设置上个月导航控件的文本。默认值是字符:< 。 |
13 | selecteddate |
获取或设置选定的日期。 |
14 | selecteddates |
获取表示所选日期的datetime 对象的集合。 |
15 | selecteddaystyle |
获取所选日期的样式属性。 |
16 | selectionmode |
获取或设置选择模式,该模式指定用户是可以选择一天,一周还是整个月份。 |
17 | selectmonthtext |
获取或设置选择器列中月份选择元素的文本。 |
18 | selectorstyle |
获取周和月选择器列的样式属性。 |
19 | selectweektext |
获取或设置在选择器列中为星期选择元素显示的文本。 |
20 | showdayheader |
获取或设置指示是否显示星期几的标题的值。 |
21 | showgridlines |
获取或设置指示是否显示网格线的值。 |
22 | shownextprevmonth |
获取或设置一个值,该值指示标题部分中是否显示下个月和上个月的导航元素。 |
23 | showtitle |
获取或设置一个值,指示是否显示标题部分。 |
24 | titleformat |
获取或设置标题部分的格式。 |
25 | titlestyle |
获取日历控件标题标题的样式属性。 |
26 | todaydaystyle |
获取日历控件上今天日期的样式属性。 |
27 | todaysdate |
获取或设置今天的日期值。 |
28 | useaccessibleheader |
获取或设置一个值,该值指示是否为日期标题呈现表格标题<th> html元素,而不是表格数据<td> html元素。 |
29 | visibledate |
获取或设置指定要显示的月份的日期。 |
30 | weekenddaystyle |
获取calendar 控件上周末日期的样式属性。 |
日历控件具有以下三个最重要的事件,允许开发人员对日历控件进行编程。这些事件分别是:
编号 | 事件 | 描述 |
---|---|---|
1 | selectionchanged |
当选择一天,一周或整个月份时引发。 |
2 | dayrender |
在日历控件的每个数据单元被渲染时引发。 |
3 | visiblemonthchanged |
当用户更改一个月时引发。 |
可以把没有任何代码的裸露日历控件放在文件后面,为网站提供了一个可行的日历,该日历显示了一年中的几个月和几天。它还允许导航到下个月和前几个月。
日历控件允许用户选择一天,一周或整个月份。 这是通过使用selectionmode属性完成的。 该属性具有以下值:
编号 | 属性 | 描述 |
---|---|---|
1 | day |
选择一天。 |
2 | dayweek |
选择一天或一整周。 |
3 | dayweekmonth |
选择一天,一周或整个月份。 |
4 | none |
什么都不能选择。 |
选择天数的语法:
<asp:calender id = "calendar1" runat = "server" selectionmode="dayweekmonth">
</asp:calender>
当选择模式设置为值dayweekmonth
时,会出现一个带有>
符号的额外列,用于选择星期,而一个>>
符号出现在日期名称左边,用来选择月份。
首先打开visual studio,创建一个名称为:calendarcontrol 的空asp.net网站项目,如下所示 -
在这个项目名称上点击右键,在弹出的选项中选择:添加 -> 添加新项,选择web窗体,创建一个文件:default.aspx, 如下所示 -
以下示例演示如何选择日期并在标签中显示日期,参考以下文件(default.aspx)代码的实现 -
<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>日期控件示例</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3> 你的生日:</h3>
<asp:calendar id="calendar1" runat="server" selectionmode="dayweekmonth" onselectionchanged="calendar1_selectionchanged">
</asp:calendar>
</div>
<p>今天是:
<asp:label id="lblday" runat="server"></asp:label>
</p>
<p>你的生日是:
<asp:label id="lblbday" runat="server"></asp:label>
</p>
</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;
public partial class _default : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
}
protected void calendar1_selectionchanged(object sender, eventargs e)
{
lblday.text = calendar1.todaysdate.toshortdatestring();
lblbday.text = calendar1.selecteddate.toshortdatestring();
}
}
运行上面示例代码,得到以下结果 -