AJAX Control Toolkit CalendarExtender 實作日期選擇器

功能概覽

CalendarExtender 讓 TextBox 獲得日期選擇功能：使用者可直接輸入，或點擊旁邊的圖示彈出行事曆挑選日期，支援自訂格式與本地化。

完整標記範例

<asp:TextBox ID="txtBookingDate" runat="server" CssClass="textbox"></asp:TextBox>
<img id="img1" src='<% = ResolveUrl("~/Image/Calendar.gif") %>' border="0" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server"
    TargetControlID="txtBookingDate"
    PopupButtonID="img1"
    Format="yyyy-MM-dd">
</ajaxToolkit:CalendarExtender>

核心屬性解析

進階設定技巧

• 限制日期範圍：設定 StartDate、EndDate 屬性（需在代碼後端指派 DateTime 值）。
• 自訂樣式：覆寫 .ajax__calendar_container 等 CSS 類別，調整字體、顏色、邊框。
• 多語系支援：Toolkit 內建多語系資源，確專案 web.config 設定 globalization culture 即可自動切換。

常見問題排查

1. 行事曆不彈出：檢查 ToolkitScriptManager 是否存在、PopupButtonID 控制項是否正確渲染、是否有 JS 錯誤阻擋。
2. 格式不符：Format 需符合 .NET 自訂日期格式字串規則，且與伺服器端解析格式一致。
3. UpdatePanel 內失效：若放在 UpdatePanel 內，需確保 CalendarExtender 也在同一 Panel，或使用 Triggers 更新。

現代替代方案

HTML5 <input type="date"> 提供原生日期選擇器，無需額外腳本：

<asp:TextBox ID="txtDate" runat="server" TextMode="Date" />

或整合輕量級函式庫（如 flatpickr、datepicker），功能更豐富且不依賴 Toolkit。