使用Calendar控制項+jQuery實作DatePicker

我們在讓使用者輸入資料時，常有機會需要讓使用者選擇日期，所以而這種選擇日期的功能我們稱「Date Picker」，你上網搜尋，可以找到一大堆資源，但我想要使用ASP.NET裡的Calendar加jQuery來實作看看，動手做，樂趣無窮。

做法很簡單，我們先新增一default.aspx網頁，然後在網頁上放上一個TextBox及一個<img>，TextBox是讓使用者選擇完日期後，把日期放入TextBox之中，而<img>是顯示及隱藏Calendar控制項。

Default.aspx

<form id="form1" runat="server">
<div>
<asp:label associatedcontrolid="tbxDate" id="lblBirthday" runat="server" text="生日：">
        <asp:textbox id="tbxDate" runat="server">
        <img alt="選擇日期" id="ibnt" src="Calendar.png" />
</div>
<asp:calendar backcolor="White" bordercolor="#999999" cellpadding="4" daynameformat="Shortest" font-names="Verdana" font-size="8pt" forecolor="Black" height="180px" id="cal" runat="server" width="200px">
            <selecteddaystyle backcolor="#666666" font-bold="True" forecolor="White">
            <selectorstyle backcolor="#CCCCCC">
            <weekenddaystyle backcolor="#FFFFCC">
            <todaydaystyle backcolor="#CCCCCC" forecolor="Black">
            <othermonthdaystyle forecolor="#808080">
            <nextprevstyle verticalalign="Bottom">
            <dayheaderstyle backcolor="#CCCCCC" font-bold="True" font-size="7pt">
            <titlestyle backcolor="#999999" bordercolor="Black" font-bold="True">  </titlestyle></dayheaderstyle></nextprevstyle></othermonthdaystyle></todaydaystyle></weekenddaystyle></selectorstyle></selecteddaystyle></asp:calendar>
</form>

我們先在Defuault.asp.vb中處理ASP.NET的相關事件。

Defuault.asp.vb

　　Protected Sub cal_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles cal.DayRender
        '生日不會大於今天，所以把大於今天的日期選取功能取消
        If e.Day.Date > DateTime.Now Then
            e.Day.IsSelectable = False
        End If
    End Sub

    Protected Sub cal_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles cal.SelectionChanged
        Me.tbxDate.Text = Me.cal.SelectedDate.ToShortDateString
    End Sub

最後就是處理Calendar顯示及隱藏的jQuery：

jQuery - position

$(function() {
    //先隱藏Calendar
    $("#cal").hide();
    //<img>的click事件
    $("#ibnt").click(function() {
        var p = $("#ibnt");
        //可使用position或offset來取得<img>的top及left座標
        //var position = p.position();
        //$("#cal").css({ "position": "relative", "top": position.top, "left": position.left });
        var offset = p.offset();
        //設定相對位置
        $("#cal").css({ "position": "relative", "top": offset.top, "left": offset.left });
        $("#cal").toggle();
    });

    //讓TextBox也能有<img>一樣的效果
    $("#tbxDate").click(function() {
        var p = $("#tbxDate");
        var position = p.position();
        $("#cal").css({ "position": "relative", "top": position.top, "left": position.left });
        //var offset = p.offset();
        //$("#cal").css({ "position": "relative", "top": offset.top, "left": offset.left });
        $("#cal").toggle();
    });
 });

簡單吧，不過由於我們是使用ASP.NET的Calendar控制項，所以在點選時，會產生Postback，才有辦法把值寫入TextBox中，不像一般純JavaScript那樣單純，把值直接寫入TextBox中。控制項有控制項的好處，或許我們還能用CallBack來改寫，或使用Ajax實作來減少Postback，但我的重點是在jQuery，簡單又實用。