2013年10月15日 星期二

Ajax的小日曆 CalendarExtender

功能需求，使用者輸入日期 或 選擇日期，並做日期格式驗證

很簡單。
首先，加入Ajax參考了沒？ 看此 http://gdlion.blogspot.tw/2013/10/ajaxajaxcontroltoolkit.html

再來
1.Default.aspx 請加入下列註冊
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>




            <td style="width: 28%">
                <asp:Label ID="lb_sdate" runat="server" Font-Size="Small" Text="自"></asp:Label>
                &nbsp;

                <asp:TextBox ID="txt_sdate" runat="server" AutoPostBack="False" Width="60px"
                    MaxLength="8" style="margin-bottom: 0px"></asp:TextBox>

                <cc1:CalendarExtender ID="CalendarExtender1" runat="server" Format="yyyyMMdd"
                    PopupButtonID="btn_calstart" TargetControlID="txt_sdate">
                </cc1:CalendarExtender>

                <asp:ImageButton ID="btn_calstart" runat="server"
                    ImageUrl="~/images/APPTL.ICO" CausesValidation="False" />

                <asp:DropDownList ID="ddl_from" runat="server" Visible="False">
                    <asp:ListItem Selected="True" Value="0">0000</asp:ListItem>
                    <asp:ListItem Value="1">0100</asp:ListItem>
                    <asp:ListItem Value="2">0200</asp:ListItem>
                    <asp:ListItem Value="3">0300</asp:ListItem>
                    <asp:ListItem Value="4">0400</asp:ListItem>
                    <asp:ListItem Value="5">0500</asp:ListItem>
                    <asp:ListItem Value="6">0600</asp:ListItem>
                    <asp:ListItem Value="7">0700</asp:ListItem>
                    <asp:ListItem Value="8">0800</asp:ListItem>
                    <asp:ListItem Value="9">0900</asp:ListItem>
                    <asp:ListItem Value="10">1000</asp:ListItem>
                    <asp:ListItem Value="11">1100</asp:ListItem>
                    <asp:ListItem Value="12">1200</asp:ListItem>
                    <asp:ListItem Value="13">1300</asp:ListItem>
                    <asp:ListItem Value="14">1400</asp:ListItem>
                    <asp:ListItem Value="15">1500</asp:ListItem>
                    <asp:ListItem Value="16">1600</asp:ListItem>
                    <asp:ListItem Value="17">1700</asp:ListItem>
                    <asp:ListItem Value="18">1800</asp:ListItem>
                    <asp:ListItem Value="19">1900</asp:ListItem>
                    <asp:ListItem Value="20">2000</asp:ListItem>
                    <asp:ListItem Value="21">2100</asp:ListItem>
                    <asp:ListItem Value="22">2200</asp:ListItem>
                    <asp:ListItem Value="23">2300</asp:ListItem>
                </asp:DropDownList>
             
                <asp:CustomValidator ID="CustomValidator1" runat="server"
                    ClientValidationFunction="check_date" ControlToValidate="txt_sdate"
                    ErrorMessage="請輸入正確日期！" SetFocusOnError="True">*</asp:CustomValidator>
            </td>



============================


            <td>
                <asp:Label ID="lb_end" runat="server" Font-Size="Small" Text="至"></asp:Label>
                &nbsp;<asp:TextBox ID="txt_edate" runat="server" AutoPostBack="False" Width="60px"
                    MaxLength="8"></asp:TextBox>                  
            <cc1:CalendarExtender ID="CalendarExtender2" runat="server" Format="yyyyMMdd"
                PopupButtonID="btn_calend" TargetControlID="txt_edate">
            </cc1:CalendarExtender>
                <asp:ImageButton ID="btn_calend" runat="server" ImageUrl="~/images/APPTL.ICO"
                    CausesValidation="False" />
                <asp:DropDownList ID="ddl_to" runat="server" Visible="False">
                    <asp:ListItem Value="1">0100</asp:ListItem>
                    <asp:ListItem Value="2">0200</asp:ListItem>
                    <asp:ListItem Value="3">0300</asp:ListItem>
                    <asp:ListItem Value="4">0400</asp:ListItem>
                    <asp:ListItem Value="5">0500</asp:ListItem>
                    <asp:ListItem Value="6">0600</asp:ListItem>
                    <asp:ListItem Value="7">0700</asp:ListItem>
                    <asp:ListItem Value="8">0800</asp:ListItem>
                    <asp:ListItem Value="9">0900</asp:ListItem>
                    <asp:ListItem Value="10">1000</asp:ListItem>
                    <asp:ListItem Value="11">1100</asp:ListItem>
                    <asp:ListItem Value="12">1200</asp:ListItem>
                    <asp:ListItem Value="13">1300</asp:ListItem>
                    <asp:ListItem Value="14">1400</asp:ListItem>
                    <asp:ListItem Value="15">1500</asp:ListItem>
                    <asp:ListItem Value="16">1600</asp:ListItem>
                    <asp:ListItem Value="17">1700</asp:ListItem>
                    <asp:ListItem Value="18">1800</asp:ListItem>
                    <asp:ListItem Value="19">1900</asp:ListItem>
                    <asp:ListItem Value="20">2000</asp:ListItem>
                    <asp:ListItem Value="21">2100</asp:ListItem>
                    <asp:ListItem Value="22">2200</asp:ListItem>
                    <asp:ListItem Value="23">2300</asp:ListItem>
                    <asp:ListItem Selected="True" Value="24">2400</asp:ListItem>
                </asp:DropDownList>
                <asp:CustomValidator ID="CustomValidator2" runat="server"
                    ClientValidationFunction="check_date" ControlToValidate="txt_edate"
                    ErrorMessage="請輸入正確日期！" Display="Dynamic">*</asp:CustomValidator>
                <asp:CompareValidator ID="CompareValidator1" runat="server"
                    ControlToCompare="txt_edate" ControlToValidate="txt_sdate"
                    ErrorMessage="起始日期不能大於結束日期" Operator="LessThanEqual">*</asp:CompareValidator>
            </td>


再加上 驗證使用者手動輸入格式：


    <script language="javascript" type="text/javascript">
        function check_date(source, arguments) {
            var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
            var args = arguments.Value;
            var year = args.substr(0, 4);
            var month = args.substr(4, 2) - 1; //月份從0~11
            var day = args.substr(6, 2);
            var source_date = new Date(year, month, day);
            if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29; //潤年
            if (year != source_date.getFullYear() || month != source_date.getMonth() || day != source_date.getDate() || day >

monthDays[month])
                arguments.IsValid = false;
            else
                arguments.IsValid = true;
        }
</script>


完畢。




不知道什麼時候會看的 延伸閱讀:
於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)