日期控件Calendar的问题
我在做一个查询页面需要选择 起始日期 和 截止日期 我想用 Calendar控件做。 我想在页面加载时，用下拉框形式显示。两个DropDownList(1 开始日期、2 截止日期）都显示的当天的日期。一点DropDownList就弹出Calendar点选其中一天后，Calendar消失 DropDownList显示的我点选的那个日期。
现在不会做的是
1、DropDownList怎么显示当天日期？
2、DropDownList怎么获取Calendar选中的日期？
3、如何讲DropDownList获得的日期赋给变量？
[解决办法]
这是一个js日历，点击textbox，然后弹出这个日历
使用：
.aspx中
<script type="text/javascript" language="javascript" src="calendar.js"></script>
<asp:TextBox ID="TextBoxStartDate" onfocus="calendar()" runat="server" Height="22px"></asp:TextBox>
calendar.js
var cal_Width = 180;//定义日历显示的宽度，至少140
document.write(" <div id=meizzCalendarLayer style='position: absolute; z-index: 9999; width: " + (cal_Width+4).toString() + "; height: 193; display: none'>");
document.write(" <iframe name=meizzCalendarIframe scrolling=no frameborder=0 width=100% height=100%> </iframe> </div>");
var WebCalendar = new WebCalendar();
function document.onclick()
{
if(WebCalendar.eventSrc != window.event.srcElement) hiddenCalendar();
}
function WebCalendar() //初始化日历的设置
{
this.regInfo = "WEB Calendar ver 3.0 关闭的快捷键：[Esc]";
this.dayShow = 38; //定义页面上要显示的天数,不能小于35,或大于39
this.daysMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
this.day = new Array(this.dayShow); //定义日历展示用的数组
this.dayObj = new Array(this.dayShow); //定义日期展示控件数组
this.dateStyle = null; //保存格式化后日期数组
this.objExport = null; //日历回传的显示控件
this.eventSrc = null; //日历显示的触发控件
this.inputDate = null; //转化外的输入的日期(d/m/yyyy)
this.thisYear = new Date().getFullYear(); //定义年的变量的初始值
this.thisMonth = new Date().getMonth()+ 1; //定义月的变量的初始值
this.thisDay = new Date().getDate(); //定义日的变量的初始值
this.today = this.thisDay +"/"+ this.thisMonth +"/"+ this.thisYear; //今天(d/m/yyyy)
this.iframe = window.frames("meizzCalendarIframe"); //日历的 iframe 载体
this.calendar = getObjectById("meizzCalendarLayer"); //日历的层
this.dateReg = ""; //日历格式验证的正则式
this.yearFall = 50; //定义显示的年份下拉框的年差值，如果今年是2000年，这里设置为50，就显示1950－2050
this.format = "yyyy-mm-dd"; //回传日期的格式
this.timeShow = false; //是否返回时间
this.drag = true; //是否允许拖动
this.darkColor = "#95B7F3"; //控件的暗色
this.lightColor = "#FFFFFF"; //控件的亮色
this.btnBgColor = "#E6E6FA"; //控件的按钮背景色
this.wordColor = "#000080"; //控件的文字颜色
this.wordDark = "#DCDCDC"; //控件的暗文字颜色
this.dayBgColor = "#F5F5FA"; //日期数字背景色
this.todayColor = "#FF0000"; //今天在日历上的标示背景色
this.DarkBorder = "#D4D0C8"; //日期显示的立体表达色
this.yearOption = "";
var yearNow = new Date().getFullYear();
yearNow = (yearNow <= 1000)? 1000 : ((yearNow >= 9999)? 9999 : yearNow);
var yearMin = (yearNow - this.yearFall >= 1000) ? yearNow - this.yearFall : 1000;
var yearMax = (yearNow + this.yearFall <= 9999) ? yearNow + this.yearFall : 9999;
yearMin = (yearMax == 9999) ? yearMax-this.yearFall*2 : yearMin;
yearMax = (yearMin == 1000) ? yearMin+this.yearFall*2 : yearMax;
for (var i=yearMin; i <=yearMax; i++) this.yearOption += " <option value='"+i+"'>"+i+"年 </option>";
}
function writeIframe()
{
var strIframe = " <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> <style>"+
"*{font-size: 12px; font-family: 宋体}"+
".bg{ color: "+ WebCalendar.lightColor +"; cursor: default; background-color: "+ WebCalendar.darkColor +";}"+
"table#tableMain{ width: "+ (cal_Width+2).toString() +"; height: 180;}"+
"table#tableWeek td{ width:14%;color: "+ WebCalendar.lightColor +";}"+
"table#tableDay td{ width:14%;font-weight: bold;}"+
"td#meizzYearHead, td#meizzYearMonth{color: "+ WebCalendar.wordColor +"}"+
".out { text-align: center; border-top: 1px solid "+ WebCalendar.DarkBorder +"; border-left: 1px solid "+ WebCalendar.DarkBorder +";"+
"border-right: 1px solid "+ WebCalendar.lightColor +"; border-bottom: 1px solid "+ WebCalendar.lightColor +";}"+
".over{ text-align: center; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF;"+
"border-bottom: 1px solid "+ WebCalendar.DarkBorder +"; border-right: 1px solid "+ WebCalendar.DarkBorder +"}"+
"input{ border: 1px solid "+ WebCalendar.darkColor +"; padding-top: 1px; height: 18; cursor: hand;"+
" color:"+ WebCalendar.wordColor +"; background-color: "+ WebCalendar.btnBgColor +"}"+
" </style> </head> <body onselectstart='return false' style='margin: 0px' oncontextmenu='return false'> <form name=meizz>";
if (WebCalendar.drag){ strIframe += " <scr"+"ipt language=javascript>"+
"var drag=false, cx=0, cy=0, o = parent.WebCalendar.calendar; function document.onmousemove(){"+
"if(parent.WebCalendar.drag && drag){if(o.style.left=='')o.style.left=0; if(o.style.top=='')o.style.top=0;"+
"o.style.left = parseInt(o.style.left) + window.event.clientX-cx;"+
"o.style.top = parseInt(o.style.top) + window.event.clientY-cy;}}"+
"function document.onkeydown(){ switch(window.event.keyCode){ case 27 : parent.hiddenCalendar(); break;"+
"case 37 : parent.prevM(); break; case 38 : parent.prevY(); break; case 39 : parent.nextM(); break; case 40 : parent.nextY(); break;"+
"case 84 : document.forms[0].today.click(); break;} window.event.keyCode = 0; window.event.returnValue= false;}"+
"function dragStart(){cx=window.event.clientX; cy=window.event.clientY; drag=true;} </scr"+"ipt>"}
strIframe += " <table id=tableMain class=bg border=0 cellspacing=2 cellpadding=0>"+
" <tr> <td width='"+ cal_Width +"' height=19 bgcolor='"+ WebCalendar.lightColor +"'>"+
" <table width='"+ cal_Width +"' id=tableHead border=0 cellspacing=1 cellpadding=0> <tr align=center>"+
" <td width='10%' height=19 class=bg title='向前翻 1 月 快捷键：←' style='cursor: hand' onclick='parent.prevM()'> <b>< </b> </td>"+
" <td width='45%' id=meizzYearHead "+
" onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+
" onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'>" +
" <select name=tmpYearSelect onblur='parent.hiddenSelect(this)' style='width:100%;'"+
" onchange='parent.WebCalendar.thisYear =this.value; parent.hiddenSelect(this); parent.writeCalendar();'>";
// var yearNow = new Date().getFullYear();
// yearNow = (yearNow <= 1000)? 1000 : ((yearNow >= 9999)? 9999 : yearNow);
// var yearMin = (yearNow - WebCalendar.yearFall >= 1000) ? yearNow - WebCalendar.yearFall : 1000;
// var yearMax = (yearNow + WebCalendar.yearFall <= 9999) ? yearNow + WebCalendar.yearFall : 9999;
// yearMin = (yearMax == 9999) ? yearMax-WebCalendar.yearFall*2 : yearMin;
// yearMax = (yearMin == 1000) ? yearMin+WebCalendar.yearFall*2 : yearMax;
// for (var i=yearMin; i <=yearMax; i++) strIframe += " <option value='"+i+"'>"+i+"年 </option>";
strIframe += WebCalendar.yearOption + " </select>"+
" </td>"+
" <td width='35%' id=meizzYearMonth "+
" onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+
" onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'>" +
" <select name=tmpMonthSelect onblur='parent.hiddenSelect(this)' style='width:100%;'" +
" onchange='parent.WebCalendar.thisMonth=this.value; parent.hiddenSelect(this); parent.writeCalendar();'>";
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" onselectedindexchanged="DropDownList1_SelectedIndexChanged"> <asp:ListItem>请选择起始日期...</asp:ListItem> <asp:ListItem>起始日期</asp:ListItem> </asp:DropDownList> <asp:Calendar ID="Calendar1" runat="server" onselectionchanged="Calendar1_SelectionChanged" Visible="False"> <SelectedDayStyle BackColor="#FF66CC" /> </asp:Calendar> <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" onselectedindexchanged="DropDownList2_SelectedIndexChanged"> <asp:ListItem>请选择结束日期...</asp:ListItem> <asp:ListItem>结束日期</asp:ListItem> </asp:DropDownList> <asp:Calendar ID="Calendar2" runat="server" onselectionchanged="Calendar2_SelectionChanged" Visible="False"> <SelectedDayStyle BackColor="#3333FF" /> </asp:Calendar>
[解决办法]
用Ajax扩展控件,很快搞定!!
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %><!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> <style type="text/css"> .MyCalendar .ajax__calendar_container { border:1px solid #646464; background-color: lemonchiffon; color: red;}</style></head><body> <form id="form1" runat="server"> <div> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true"> </asp:ToolkitScriptManager> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:CalendarExtender ID="CalendarExtender1" runat="server" Format="yyyy-MM-dd" PopupButtonID="TextBox1" TargetControlID="TextBox1" CssClass="MyCalendar"> </asp:CalendarExtender> </div> </form></body></html>