純Jquery實現年月選擇，並且根據當前月份划分周次

 

幫一網友所做，效果如圖。

具體功能是：點擊文本框，顯示年月列表，確定之后下拉列表框將這個月分為幾周，比如，第一首是從1號到3號，第二周便是4號到10號，以此類推。

開始想的是使用部分jq+updatepanel+后置代碼，但是總是覺得這樣的效果不好，刷新一個年份就要與服務器進行交互，如果網絡太差卻是給人感覺不好，所以決定使用純js和jq來做。

廢話不多說。

1.首先實現年月選擇列表，使用一個div將按鈕列表之類全部放在其中，並且定位方式使用絕對定位，這個很重要，為了點擊文本框的時候，顯示出來不會講其余的div撐開，使用絕對定位可讓其懸浮在上，而不影響其他布局。布局好之后，這個放於一旁，不用設置其所在位置。它的位置后面再說，好了布局完成，貼上代碼，由於是測試，有些樣式就寫在div里面了。

    <!--時間月份選擇框-->
    <div id="d1" style="display: none; height: 222px; width: 150px; position: absolute">
        <asp:Panel ID="p1" runat="server" Width="150px" Height="222px" BackColor="#CCCCCC">
            <div style="width: 100%; height: 30px;">
                <table style="width: 100%">
                    <tr>
                        <td>
                            <input id="btnup" type="button" class="btn" value="<<" />
                            <input id="btndown" type="button" value=">>" class="btn" />
                        </td>
                        <td style="text-align: right">
                            <input id="btnhide" type="button" class="btn" value="確定" />
                        </td>
                    </tr>
                </table>
            </div>
            <div style="width: 100%; height: 170px;">
                <select size="4" name="listyymm" id="listyymm" class="listbox">
                </select>
            </div>
        </asp:Panel>
    </div>
    <!-------------------------->

2.既然布局好了，那么就要實現的綁定了，而這個列表框使用 select標記而不是listbox。這是為什么呢？因為這些功能都是js實現的，列表中的數據也是js綁定的，如果使用listbox，並且使用js綁定數據，在瀏覽的時候就要出錯了，具體原因就不詳解了。包括后面 下拉列表框同樣使用的是select而不是listbox，兩個樣式不同只是一個size屬性控制而已。
好了，將綁定年月的code貼上

        var year = 0;
        //綁定年月
        function time() {
            $("#listyymm").empty();
            var date = new Date();
            var yy = date.getFullYear() + year;
            for (var i = 1; i <= 12; i++) {
                if (i < 10) {
                    i = "0" + i;
                }
                $("#listyymm").append("<option value='Value'>" + yy + "年" + i + "月</option>");
            }
            $('#listyymm')[0].selectedIndex = 0;
        };

在代碼聲明了一個year的全局變量，用於點擊按鈕時改變年份，而月份是固定的12月這個就不用管了。

  //上下一年按鈕
            $("#btndown").click(function () {
                year += 1;
                time();
            });
            $("#btnup").click(function () {
                year -= 1;
                time();
            });

好了，數據算是綁定完了，然后點擊按鈕將選中的數據復制到文本框中，當數據復制到文本框后並且將這個div重新隱藏。

  //確定按鈕
            $("#btnhide").click(function () {
                var itme = $("#listyymm").find("option:selected").text();
                $("#txt1:text").val(itme.toString());
                week();
                $("#d1").css("display", "none");
            });

這樣算是完成一小半了。但是，為了視覺效果更好，所以，還應該做到無論文本框在哪兒，年月列表框就出現在哪兒。所以，這個時候就用到絕對定位了開始的時候是將容納年月的div的display設為none，也就隱藏了，但點擊文本框的時候就顯示出來，並且讓它顯示在文本框下面。
所以就需要給文本框添加click事件，並且還要獲取文本框在瀏覽器中的絕對位置，通過這個坐標來動態改變年月div。

 $(function () {
            //文本框單擊事件
            $("#txt1").click(function () {
                $("#d1").css("display", "block");
                var top = ($("#txt1").offset().top);
                top += 25;
                var left = $("#txt1").offset().left;
                $("#d1").css("top", top);
                $("#d1").css("left", left);
                time();

            });

3.既然年月綁定好了，那么就要以周為單位來分割這個月了。

首先做好顯示周次的樣式布局。其實很簡單，也就是一個select標記

<select name="dropweek" id="dropweek" class="dropweek"></select>

然后獲取這個月的1號是周幾，然后通過1號和1號對應的周次來推算了后面每天對應的周次。這個邏輯花了我不少時間，腦袋實在不夠用了。其實整個程序最復雜就是這個周次分割了。代碼貼上。

  //綁定周
        function week() {
            var text = $("#txt1").val()
            var ymd = text.substring(0, 4) + "-" + text.substring(5, 7) + "-1";
            var week = new Date(Date.parse(ymd.replace(/\-/g, "/")));
            var w = week.toString().substring(0, 3);
            var yymm = new Date(text.substring(0, 4), text.substring(5, 7), 0);
            var day = yymm.getDate();
            var dd = 1;
            switch (w) {
                case "Mon": dd = 0; break;
                case "Tue": dd = 1; break;
                case "Wed": dd = 2; break;
                case "Thu": dd = 3; break;
                case "Fri": dd = 4; break;
                case "Sat": dd = 5; break;
                case "Sun": dd = 6; break;
            }
            var aw = 5;
            if (day == 28 && dd == 0) {
                aw = 4;
            }
            var i = 1;
            $("#dropweek").empty();
            for (var i = 0; i < aw; i++) {
                var start = i * 7 + 1 - dd;
                var end = i * 7 + 7 - dd;
                if (start < 1) {
                    start = 1;
                }
                if (end > day) {
                    end = day;
                }
                var str = ("第" + (i + 1) + "周 <" + text.substring(5, 7) + "月" + start + "號—" + text.substring(5, 7) + "月" + end + "號>").toString();
                $("#dropweek").append("<option value='Value'>" + str + "</option>");
            }
            $('#dropweek')[0].selectedIndex = 0;
            var itme = $("#dropweek").find("option:selected").text();
            $("#txtweek:text").val(itme.toString());
        }

現在雖然綁定上了，但是在后置代碼中要怎么去獲取他選中項的數據呢？而且這里是html標記，不是服務端的控件，后置代碼中是不能直接獲取了，那么有人說添加一個runat="server" 后面使用request來獲取，，但是我沒能成功，所以想了一個折中的辦法。使用一個服務端的textbox，裝在div里面隱藏在頁面中，列表中選中項改變時就將值復制到文本框中，這樣還有一個好處就是在后置代碼中直接使用textbox.text就獲取到了，比較符合平時的使用。

4.這樣也就完成了。最后貼上完整的代碼。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        var year = 0;
        //綁定年月
        function time() {
            $("#listyymm").empty();
            var date = new Date();
            var yy = date.getFullYear() + year;
            for (var i = 1; i <= 12; i++) {
                if (i < 10) {
                    i = "0" + i;
                }
                $("#listyymm").append("<option value='Value'>" + yy + "年" + i + "月</option>");
            }
            $('#listyymm')[0].selectedIndex = 0;
        };
        //綁定周
        function week() {
            var text = $("#txt1").val()
            var ymd = text.substring(0, 4) + "-" + text.substring(5, 7) + "-1";
            var week = new Date(Date.parse(ymd.replace(/\-/g, "/")));
            var w = week.toString().substring(0, 3);
            var yymm = new Date(text.substring(0, 4), text.substring(5, 7), 0);
            var day = yymm.getDate();
            var dd = 1;
            switch (w) {
                case "Mon": dd = 0; break;
                case "Tue": dd = 1; break;
                case "Wed": dd = 2; break;
                case "Thu": dd = 3; break;
                case "Fri": dd = 4; break;
                case "Sat": dd = 5; break;
                case "Sun": dd = 6; break;
            }
            var aw = 5;
            if (day == 28 && dd == 0) {
                aw = 4;
            }
            var i = 1;
            $("#dropweek").empty();
            for (var i = 0; i < aw; i++) {
                var start = i * 7 + 1 - dd;
                var end = i * 7 + 7 - dd;
                if (start < 1) {
                    start = 1;
                }
                if (end > day) {
                    end = day;
                }
                var str = ("第" + (i + 1) + "周 <" + text.substring(5, 7) + "月" + start + "號—" + text.substring(5, 7) + "月" + end + "號>").toString();
                $("#dropweek").append("<option value='Value'>" + str + "</option>");
            }
            $('#dropweek')[0].selectedIndex = 0;
            var itme = $("#dropweek").find("option:selected").text();
            $("#txtweek:text").val(itme.toString());
        }
        $(function () {
            //文本框單擊事件
            $("#txt1").click(function () {
                $("#d1").css("display", "block");
                var top = ($("#txt1").offset().top);
                top += 25;
                var left = $("#txt1").offset().left;
                $("#d1").css("top", top);
                $("#d1").css("left", left);
                time();

            });
            //確定按鈕
            $("#btnhide").click(function () {
                var itme = $("#listyymm").find("option:selected").text();
                $("#txt1:text").val(itme.toString());
                week();
                $("#d1").css("display", "none");
            });
            //上下一年按鈕
            $("#btndown").click(function () {
                year += 1;
                time();
            });
            $("#btnup").click(function () {
                year -= 1;
                time();
            });
            //dropdownonchange

            $("#dropweek").change(function () {
                var itme = $("#dropweek").find("option:selected").text();
                $("#txtweek:text").val(itme.toString());
            });

        });



    </script>
    <style type="text/css">
        .listbox
        {
            width: 148px;
            height: 190px;
            border: 1px solid #c0c0c0;
        }
        .btn
        {
            width: 44px;
            height: 22px;
            border: 1px solid #c0c0c0;
            background-color: #f0f0f0;
        }
        .dropweek
        {
            width: 220px;
            height: 22px;
            border: 1px solid #c0c0c0;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <!--時間月份選擇框-->
    <div id="d1" style="display: none; height: 222px; width: 150px; position: absolute">
        <asp:Panel ID="p1" runat="server" Width="150px" Height="222px" BackColor="#CCCCCC">
            <div style="width: 100%; height: 30px;">
                <table style="width: 100%">
                    <tr>
                        <td>
                            <input id="btnup" type="button" class="btn" value="<<" />
                            <input id="btndown" type="button" value=">>" class="btn" />
                        </td>
                        <td style="text-align: right">
                            <input id="btnhide" type="button" class="btn" value="確定" />
                        </td>
                    </tr>
                </table>
            </div>
            <div style="width: 100%; height: 170px;">
                <select size="4" name="listyymm" id="listyymm" class="listbox">
                </select>
            </div>
        </asp:Panel>
    </div>
    <!-------------------------->
    <div>
        &nbsp;<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        <asp:TextBox ID="txt1" onfocus="this.blur()" runat="server"></asp:TextBox>
        <div style="display: none">
            <asp:TextBox ID="txtweek" runat="server"></asp:TextBox></div>
        <select name="dropweek" id="dropweek" class="dropweek">
        </select>
    </div>
    </form>
</body>
</html>

后置代碼獲取兩個數據
       //輸出年月
            Response.Write(txt1.Text);
        //輸出dropdownlist中選中項，也就是第？周 是 幾號至幾號
            string str = txtweek.Text;
            Response.Write(str);