有時候會遇到一些需求，必須使用三個下拉式選單讓使用者分別選擇年、月、日這些日期來當條件
其中比較麻煩的是日期的部分，因為2月只有28天，還必須判斷閏年
比較偷懶的方法，就是在Server端判斷三個下拉式選單的值，是否可以正常轉成日期格式來得知日期是否有選擇錯誤
此種作法優點是程式好寫，缺點是....
使用者在選擇2月份時，會看到日期下拉式選單不只只有28天，會讓使用者質疑工程師能力 XD

因為此項缺點，所以我想用比較麻煩的做法，用javascript做掉 XD

DateDemo.aspx中script的部分

<script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    
    //  取得一個月有幾天
    function getDaysInMonth(year, month) {
        month = parseInt(month, 10) + 1;
        var temp = new Date(year + "/" + month + "/0");
        return temp.getDate();
    }
    
    //  字串左邊補零
    function padLeft(str,lenght){
        if(str.length >= lenght)
            return str;
        else
            return padLeft("0" +str,lenght);
    }
    
    //  字串右邊補零
    function padRight(str,lenght){
        if(str.length >= lenght)
            return str;
        else
            return padRight(str+"0",lenght);
    }
    
    function fillDay(){
        var year = $('#<%= ddlYear.ClientID %>').find(':selected').val();
        var month = $('#<%= ddlMonth.ClientID %>').find(':selected').val();
        
        //  清空日期的下拉式選單
        $('#ddlDay').html('');
        
        //  將天數填入日期的下拉式選單
        for(var i = 1; i <= getDaysInMonth(year, month); i++) {
            var value = padLeft(i.toString(), 2);
            $('#ddlDay').append(
                                $("<option></option>").
                                attr("value", value).
                                text(value)); 
        }
        
        //  用hidden裡的值，對日期作選取，這樣post後，日期的值不會跑掉
        if( $('#<%= hiddenDay.ClientID %>').val().length > 0 ) {
            $('#ddlDay').val($('#<%= hiddenDay.ClientID %>').val());
        }
    }    
            
    $(document).ready(function(){
        
        fillDay();
        
        $('#<%= ddlMonth.ClientID %>').change(function(){
            fillDay();
        });
        
        $('#ddlDay').change(function() {
            var day = $(this).find(':selected').val();
            
            //  將選取的值放到 hidden 裡
            $('#<%= hiddenDay.ClientID %>').val(day);
        });
    });

    </script>

DateDemo.aspx中html的部分

<form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="ddlYear" Font-Size="12px" runat="server"></asp:DropDownList>年
        <asp:DropDownList ID="ddlMonth" Font-Size="12px" runat="server"></asp:DropDownList>月
        <select id="ddlDay"></select>日<br />
        <asp:HiddenField ID="hiddenDay" runat="server" />
        <asp:Button ID="btnGetDate" runat="server" OnClick="btnGetDate_Click" Text="Get Date" />
    </div>
    </form>

DateDemo.aspx.cs

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack) return;

        // Year
        for (int i = 2000; i <= 2050; i++)
        {
            this.ddlYear.Items.Add(i.ToString());
        }

        //  Month
        for (int i = 1; i <= 12; i++)
        {
            this.ddlMonth.Items.Add(i.ToString("00"));
        }
    }

    protected void btnGetDate_Click(object sender, EventArgs e)
    {
        Response.Write(string.Format("{0}-{1}-{2}", this.ddlYear.SelectedValue, this.ddlMonth.SelectedValue, this.hiddenDay.Value));
    }