使用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,簡單又實用。

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。