ASP.NET 行事曆控制項與 JS 日曆 (My97DatePicker) 完整應用教學

學習目標

1. 掌握 ASP.NET Calendar 控制項 進階樣式設定與日期選取事件。
2. 整合輕量級 My97DatePicker (WdatePicker) 實現優雅的日期時間選取體驗。

專案一：Calendar 伺服端行事曆

頁面佈局

拖放 TextBox (ID: txtDate) 與 Calendar (ID: Calendar1) 至頁面。

關鍵屬性設定 (屬性視窗或標記)

• 日期標題：TitleFormat="MMMM yyyy"、DayNameFormat="Full"、TitleStyle-ForeColor="Blue"
• 週末樣式：WeekendDayStyle-BackColor="Yellow" ForeColor="Red"
• 今日樣式：TodayDayStyle-BackColor="Green" ForeColor="White"
• 選取模式：SelectionMode="DayWeekMonth" (可選日、週、月)
• 選取樣式：SelectedDayStyle-BackColor="Gray"

SelectionChanged 事件處理

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
    // 將選取日期格式化顯示於 TextBox
    txtDate.Text = Calendar1.SelectedDate.ToString("yyyy/MM/dd");
}

專案二：My97DatePicker 客戶端日期選取器

引用腳本

下載 My97DatePicker，將資料夾置於專案根目錄 /My97DatePicker/。

頁面標記

<%@ Page Language="C#" %>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JS 日曆示範</title>
    <script src="My97DatePicker/WdatePicker.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="txtBirth" runat="server" CssClass="Wdate" 
                onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm', showTime:true})" />
        </div>
    </form>
</body>
</html>

常用參數說明

執行畫面

兩者選擇建議

• Calendar：需 PostBack、伺服端驗證、與其他伺服端控制項聯動時適合。
• My97DatePicker：純客戶端操作、無 PostBack、行動裝置友善、樣式豐富、效能佳，現代專案首選。

結語

依專案需求選擇伺服端 Calendar 或客戶端 My97DatePicker，並善用樣式與事件客製化，即可提供直觀好用的日期輸入體驗。