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/


Share/Save/Bookmark

15 comments :: AJAX DateTimePicker Extender

  1. 請問這個在ASP.NET 2.0中也能用嗎?

  2. 如果要把組件引用到 ASP.NET 2.0 是可以的,不過,你必須安裝 .NET Framework 3.5,且 web.config 必須參照原始碼中範例網站的組態檔,加入 AJAX Extensions 相關設定。

  3. 在弹出式对话框中好像被覆盖啦

  4. 您好.. 我有使用這個Extension..可是我發現到當Table或頁面太長的時候,日曆所出現的位置就會變得異常,不知道這個問題該如何解決呢?

  5. 你好!
    有辨法能當啟動這個元件時,時間給預設值EX~00:00嗎 當使用者點選時間時才顯示為系統時間做為更改??
    linyanchih@gmail.com

  6. 您好, 這個有沒有辦法trigger TextBox 的TextChanged?謝謝.

  7. 此版本不支援 TextChanged 觸發事件。

  8. 不好意思.想請問日曆上面的am.pm 是否能改為中文的上午.下午?

  9. 可逕自修改 calendar.js,將 am/pm 置換成中文。

  10. 抱歉 !問個比較淺的問提,如何將這個元件加入,我直接將這個dll加入專案,還是認不得的樣子.

  11. 請將 DLL 放在 ASP.NET Web 專案的 Bin 資料夾即可。另請確認是否在網頁中使用 @Register 指示詞宣告自訂伺服器控制項。

  12. 如何宣告,可以給個範例嗎?

  13. 你可以在如上文章提供的連結下載原始碼,內有完整的範例可參考。

  14. 我把此元件放在GridView上,GridView外層有UpdatePanel似乎就會有問題,日曆的樣版(顏色、模版)會消會,只剩下字,有解決方式嗎?

張貼留言