AJAX DateTimePicker Extender

在 Windows Forms 中，有 DateTimePicker 控制項可以用來選擇日期或編輯時間。然而，在 ASP.NET 中只有內建可選取日期的 Calendar Web 伺服器控制項，以及 AJAX Control Toolkit 提供的 Calendar 擴充項外，並沒有兼具選擇日期或編輯時間的 Web 控制項。所幸，jscalendar 正好可以滿足這樣的需求。它是一款功能強大且免費的 DHTML 日期選擇器，不僅內建多種的面板和色彩主題，還支援多國語言顯示介面。

為了能方便引用到 ASP.NET 網頁中，於是自己便著手將 jscalendar 1.0 封裝到自訂的 AJAX DateTimePicker 擴充項控制項。


DateTimePicker 擴充項的屬性

屬性	說明
Align	指定快顯日曆的對齊方式，預設值為 "Br"。詳見對齊方式格式說明。
Format	指示要套用到文字方塊中的日期顯示格式，期預設值為 "%Y-%m-%d"。詳見自訂日期時間格式說明。
FirstDayOfWeek	以 0 到 6 指定每週的起始日，0 表示星期日，1 為星期一，依此類推。預設為星期日。
PopupButtonID	指定用來觸發顯示快顯日曆的控制項識別碼。
TargetControlID	指定顯示選取日期的 TextBox 控制項識別碼。
Theme	預設的日曆面板主題為 Aqua，你可以依照偏好變更為其他的面版樣式：Blue、Blue2、Brown、Green、System、Tas、Win2k1、Win2k2、Win2kCold1、Win2kCold2。
TimeMode	以 12 或 24 定義時間格式，預設為 12 小時制。
SingleClick	指定日期選擇是 Single-Click 或 Double-Click 模式。若指定為 true（預設值）則表示為 Single-Click 模式。
ShowsTime	指定是否顯示時間，若指定為 false（預設值）則表示不顯示。
WeekNumbers	指定是否顯示星期名稱，若指定為 true（預設值）則表示要顯示。

對齊方式格式
使用 Align 屬性可以指定快顯日曆的垂直對齊（Vertical Alignment）及水平對齊（Horizontal Alignment）方式。在 Align 屬性中的第一個字元表示垂直對齊方式，其格式規範如下：

格式	說明
T	下邊緣與目標元素的上邊緣相鄰對齊。
t	下邊緣與目標元素的下邊緣相鄰對齊。
c	垂直置中於目標元素。
b	上邊緣與目標元素的上邊緣相鄰對齊。
B	上邊緣與目標元素的下邊緣相鄰對齊。

第二個字元表示水平對齊方式，其格式規範如下：

格式	說明
L	右邊緣與目標元素的左邊緣相鄰對齊。
l	左邊緣與目標元素的左邊緣相鄰對齊。
c	水平置中於目標元素。
r	右邊緣與目標元素的右邊緣相鄰對齊。
R	左邊緣與目標元素的右邊緣相鄰對齊。

自訂日期時間格式
以下是使用 Format 屬性指定自訂日期時間格式的規範：

格式	說明
%a	表示星期名稱的縮寫。
%A	表示星期名稱的全名。
%b	表示月份名稱的縮寫
%B	表示月份名稱的全名。
%C	表示世紀的數字。
%d	以 00 到 31 表示月份的日期。
%e	以 0 到 31 表示月份的日期。
%H	以 00 到 23 的數字來表示小時。
%I	以 01 到 12 的數字來表示小時。
%j	本年第幾天。
%k	以 0 到 23 的數字來表示小時。
%l	以 1 到 12 的數字來表示小時。
%m	以 01 到 12 的數字代表月份。
%M	以 00 到 59 的數字來表示分鐘。
%n	表示換行字元。
%p	表示 PM 或 AM。
%P	表示 pm 或 am。
%S	以 00 到 59 的數字來表示秒數。
%s	自 Epoch 系統時間開始所經過的秒數。
%t	表示 Tab 字元。
%U, %W, %V	本年的第幾周。
%u	以星期一為起始序數，從 1 到 7 的數字代表星期的日期。
%w	以星期日為起始序數，從 0 到 6 的數字代表星期的日期。
%y	以兩個位數的數字來表示年份。
%Y	以四個位數的數字來表示年份。
%%	將 % 字元顯示為常值（Literal）。

範例
下列範例會建立能讓使用者選擇日期及時間的日曆：

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<ace:DateTimePickerExtender ID="DateTimePickerExtender1" runat="server"
TargetControlID="TextBox1"
Format="%Y-%m-%d %H:%M"
ShowsTime="true"
SingleClick="false" />

你也可以加入按鈕來開啟快顯日曆：

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button runat="server" ID="Button2" Text="..." OnClientClick="return false;" />    
<ace:DateTimePickerExtender ID="DateTimePickerExtender2" runat="server"
TargetControlID="TextBox2"
PopupButtonID="Button2"
Format="%Y-%m-%d %H:%M"
ShowsTime="true" />

 Download source code - for ASP.NET 3.5

資料來源：
http://sourceforge.net/projects/jscalendar/

AJAX DateTimePicker Extender