ASP.NET 伺服器端日期選擇控件開發（二）：DatePicker 復合控件完整實作

編輯：關於C語言

需求分析

內建 Calendar 控件無法滿足「下拉式、點擊按鈕顯示、選擇後自動隱藏、值回填輸入框」的需求，故開發復合控件 DatePicker。

專案建立與類別架構

專案類型：Web 控制項庫
命名空間：AquaCalendar
類別名稱：DatePicker 繼承 WebControl 並實作 IPostBackEventHandler

核心程式碼解析

子控件建立與樣式設定

protected override void CreateChildControls()
{
    Controls.Clear();
    _Calendar = new Calendar();
    _Calendar.ID = MyCalendarID;
    _Calendar.SelectedDate = DateTime.Parse(Text);
    // ... 設定標題、字型、顏色、導航文字等樣式 ...
    _Calendar.Style.Add("display", "none");  // 預設隱藏
    _Calendar.SelectionChanged += _Calendar_SelectionChanged;
    this.Controls.Add(_Calendar);
}

關鍵屬性實作

Text：日期值，支援長/短格式切換，含驗證邏輯
Enabled：重寫基類屬性，同步禁用按鈕
ButtonStyle / ButtonText：自訂按鈕外觀
DateFormat：CalendarEnum.LongDateTime / ShortDateTime
多個 Browsable(false) 屬性：輸出 ClientID/UniqueID 供前端腳本使用

Render 輸出 HTML 結構

產生 2×2 表格：

第 1 列第 1 欄：文字輸入框 (type="text")
第 1 列第 2 欄：提交按鈕 (type="submit")，onclick 綁定 __doPostBack
第 2 列跨雙欄：Calendar 控件輸出

PostBack 與事件處理

// 實作 IPostBackEventHandler
public void RaisePostBackEvent(string eventArgument)
{
    OnClick(EventArgs.Empty);
}

protected virtual void OnClick(EventArgs e)
{
    if (_Calendar.Attributes["display"] != "")
    {
        _Calendar.SelectedDate = DateTime.Parse(Text);
        _Calendar.Style.Add("display", "");  // 顯示日曆
    }
}

private void _Calendar_SelectionChanged(object sender, EventArgs e)
{
    Text = _Calendar.SelectedDate.ToString();
    _Calendar.Style.Add("display", "none");  // 隱藏日曆
}