帮一网友所做，效果如图。
具体功能是：点击文本框，显示年月列表，确定之后下拉列表框将这个月分为几周，比如，第一首是从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="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" οnfοcus="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);
<script type="text/javascript">
</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
