日曆控制項是功能豐富的web控制項,它提供以下功能:
- Displaying one month at a time
- Selecting a day, a week or a month
- Selecting a range of days
- Moving from month to month
- Controlling the display of the days programmatically
日曆控制項的基本語法是:
<asp:Calender ID = "Calendar1" runat = "server"> </asp:Calender>
Properties and Events of the Calendar Control
日曆控制項有許多屬性和事件,使用這些屬性和事件可以自定義控制項的操作和顯示。下表提供了日曆控制項的一些重要屬性:
Properties | Description |
---|---|
Caption | Gets or sets the caption for the calendar control. |
CaptionAlign | Gets or sets the alignment for the caption. |
CellPadding | Gets or sets the number of spaces between the data and the cell border. |
CellSpacing | Gets or sets the space between cells. |
DayHeaderStyle | Gets the style properties for the section that displays the day of the week. |
DayNameFormat | Gets or sets format of days of the week. |
DayStyle | Gets the style properties for the days in the displayed month. |
FirstDayOfWeek | Gets or sets the day of week to display in the first column. |
NextMonthText | Gets or sets the text for next month navigation control. The default value is >. |
NextPrevFormat | Gets or sets the format of the next and previous month navigation control. |
OtherMonthDayStyle | Gets the style properties for the days on the Calendar control that are not in the displayed month. |
PrevMonthText | Gets or sets the text for previous month navigation control. The default value is <. |
SelectedDate | Gets or sets the selected date. |
SelectedDates | Gets a collection of DateTime objects representing the selected dates. |
SelectedDayStyle | Gets the style properties for the selected dates. |
SelectionMode | Gets or sets the selection mode that specifies whether the user can select a single day, a week or an entire month. |
SelectMonthText | Gets or sets the text for the month selection element in the selector column. |
SelectorStyle | Gets the style properties for the week and month selector column. |
SelectWeekText | Gets or sets the text displayed for the week selection element in the selector column. |
ShowDayHeader | Gets or sets the value indicating whether the heading for the days of the week is displayed. |
ShowGridLines | Gets or sets the value indicating whether the gridlines would be shown. |
ShowNextPrevMonth | Gets or sets a value indicating whether next and previous month navigation elements are shown in the title section. |
ShowTitle | Gets or sets a value indicating whether the title section is displayed. |
TitleFormat | Gets or sets the format for the title section. |
Titlestyle | Get the style properties of the title heading for the Calendar control. |
TodayDayStyle | Gets the style properties for today's date on the Calendar control. |
TodaysDate | Gets or sets the value for today's date. |
UseAccessibleHeader | Gets or sets a value that indicates whether to render the table header <th> HTML element for the day headers instead of the table data <td> HTML element. |
VisibleDate | Gets or sets the date that specifies the month to display. |
WeekendDayStyle | Gets the style properties for the weekend dates on the Calendar control. |
Calendar控制項有以下三個最重要的事件,允許開發人員對Calendar控制項進行編程。他們是:
Events | Description |
---|---|
SelectionChanged | It is raised when a day, a week or an entire month is selected. |
DayRender | It is raised when each data cell of the calendar control is rendered. |
VisibleMonthChanged | It is raised when user changes a month. |
Working with the Calendar Control
放置一個沒有任何代碼隱藏文件的裸體日曆控制項可以爲站點提供一個可用的日曆,顯示一年中的月份和日期。它還允許導航到下個月和上個月。
日曆控制項允許用戶選擇一天、一周或整個月。這是通過使用SelectionMode屬性完成的。此屬性具有以下值:
Properties | Description |
---|---|
Day | To select a single day. |
DayWeek | To select a single day or an entire week. |
DayWeekMonth | To select a single day, a week, or an entire month. |
None | Nothing can be selected. |
選擇日期的語法:
<asp:Calender ID = "Calendar1" runat = "server" SelectionMode="DayWeekMonth"> </asp:Calender>
當選擇模式設置爲值DayWeekMonth時,將顯示一個帶有>符號的額外列,用於選擇周,並在天名稱的左側顯示一個>>符號,用於選擇月。
Example
以下示例演示如何選擇日期並在標籤中顯示日期:
內容文件代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="calendardemo._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> Untitled Page </title> </head> <body> <form id="form1" runat="server"> <div> <h3> Your Birthday:</h3> <asp:Calendar ID="Calendar1" runat="server SelectionMode="DayWeekMonth" onselectionchanged="Calendar1_SelectionChanged"> </asp:Calendar> </div> <p>Todays date is: <asp:Label ID="lblday" runat="server"></asp:Label> </p> <p>Your Birday is: <asp:Label ID="lblbday" runat="server"></asp:Label> </p> </form> </body> </html>
事件選擇的事件處理程序已更改:
protected void Calendar1_SelectionChanged(object sender, EventArgs e) { lblday.Text = Calendar1.TodaysDate.ToShortDateString(); lblbday.Text = Calendar1.SelectedDate.ToShortDateString(); }
運行文件時,應生成以下輸出: