ASP.NET日曆控制元件 - tw511教學網

日曆控制元件是一個功能豐富的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();
    }
}

執行上面範例程式碼，得到以下結果 -