纯Jquery实现年月选择，并且根据当

帮一网友所做，效果如图。

具体功能是：点击文本框，显示年月列表，确定之后下拉列表框将这个月分为几周，比如，第一首是从1号到3号，第二周便是4号到10号，以此类推。

开始想的是使用部分jq+updatepanel+后置代码，但是总是觉得这样的效果不好，刷新一个年份就要与服务器进行交互，如果网络太差却是给人感觉不好，所以决定使用纯js和jq来做。

废话不多说。

1.首先实现年月选择列表，使用一个div将按钮列表之类全部放在其中，并且定位方式使用绝对定位，这个很重要，为了点击文本框的时候，显示出来不会讲其余的div撑开，使用绝对定位可让其悬浮在上，而不影响其他布局。布局好之后，这个放于一旁，不用设置其所在位置。它的位置后面再说，好了布局完成，贴上代码，由于是测试，有些样式就写在div里面了。

      年月列表CODE           <!--时间月份选择框-->
    <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贴上

      绑定年月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月这个就不用管了。

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

好了，数据算是绑定完了，然后点击按钮将选中的数据复制到文本框中，当数据复制到文本框后并且将这个div重新隐藏。

      确定Code          //确定按钮
            $("#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。

      文本框click事件Code         $(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号对应的周次来推算了后面每天对应的周次。这个逻辑花了我不少时间，脑袋实在不够用了。其实整个程序最复杂就是这个周次分割了。代码贴上。

      周次分割月份Code          //绑定周
        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.这样也就完成了。最后贴上完整的代码。

      完整Code        <%@ 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=http://blog.csdn.net/dyllove98/article/details/"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>
         <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);