<script language="JavaScript">
var gdCtrl = new Object()
var SynCtl = new Object()
var goSelectTag = new Array()
var overcolor="#FF6600"
var gcGray = "#999999"
var gcToggle = "#FFFF99"
var gcBG = "#FFFFF4"
var titleBG="#3399CC"
var previousObject = null
var oPopup = window.createPopup()
var gdCurDate = new Date()
var giYear = gdCurDate.getFullYear()
var giMonth = gdCurDate.getMonth()+1
var giDay = gdCurDate.getDate()
function shutup(){
oPopup.hide()
}
function fSetDate(iYear, iMonth, iDay){
VicPopCal.style.visibility = "hidden"
if ((iYear == 0) &&(iMonth == 0) &&(iDay == 0)){
gdCtrl.value = ""
}else{
iMonth = iMonth + 100 + ""
iMonth = iMonth.substring(1)
iDay = iDay + 100 + ""
iDay = iDay.substring(1)
if(gdCtrl.tagName == "INPUT"){
gdCtrl.value = iYear+"-"+iMonth+"-"+iDay
if(SynCtl!=null)
SynCtl.value = iYear+"-"+iMonth+"-"+iDay
}else{
gdCtrl.innerText = iYear+"-"+iMonth+"-"+iDay
if(SynCtl!=null)
SynCtl.innerText = iYear+"-"+iMonth+"-"+iDay
}
}
}
function fSetSelected(aCell){
var iOffset = 0
var iYear = parseInt(tbSelYear.value)
var iMonth = parseInt(tbSelMonth.value)
aCell.bgColor = gcBG
with (aCell.children["cellText"]){
var iDay = parseInt(innerText)
if (color==gcGray)
iOffset = (Victor<10)?-1:1
iMonth += iOffset
if (iMonth<1) {
iYear--
iMonth = 12
}else if (iMonth>12){
iYear++
iMonth = 1
}
}
fSetDate(iYear, iMonth, iDay)
shutup()
}
function Point(iX, iY){
this.x = iX
this.y = iY
}
function fBuildCal(iYear, iMonth) {
var aMonth=new Array()
for(i=1i<7i++)
aMonth[i]=new Array(i)
var dCalDate=new Date(iYear, iMonth-1, 1)
var iDayOfFirst=dCalDate.getDay()
var iDaysInMonth=new Date(iYear, iMonth, 0).getDate()
var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1
var iDate = 1
var iNext = 1
for (d = 0d <7d++)
aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++
for (w = 2w <7w++)
for (d = 0d <7d++)
aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++)
return aMonth
}
function fDrawCal(iYear, iMonth, iCellHeight, sDateTextSize) {
var WeekDay = new Array("日","一","二","三","四","五","六")
var styleTD = " bgcolor='"+titleBG+"' valign='middle' align='center' height='"+iCellHeight+"' style='font:bold "+sDateTextSize+"" //Coded by Liming Weng(Victor Won) email:victorwon@sina.com
var styleTDBG = " bgcolor='"+gcBG+"' valign='middle' align='center' height='"+iCellHeight+"' style='font:"+sDateTextSize+""
with (document) {
write("<tr>")
for(i=0i<7i++){
write("<td "+styleTD+"color:#ffffff' >"+ WeekDay[i] + "</td>")
}
write("</tr>")
for (w = 1w <7w++) {
write("<tr>")
for (d = 0d <7d++) {
write("<td id=calCell "+styleTDBG+"cursor:hand' onMouseOver='this.bgColor=parent.gcToggle' onMouseOut='this.bgColor=parent.gcBG' onclick='parent.fSetSelected(this)'>")
write("<font id=cellText Victor='Liming Weng'></font>")
write("</td>")
}
write("</tr>")
}
}
}
function fUpdateCal(iYear, iMonth) {
tbSelMonth.options[iMonth-1].selected = true
for (i = 0i <tbSelYear.lengthi++)
if (tbSelYear.options[i].value == iYear){
tbSelYear.options[i].selected = true
}
myMonth = fBuildCal(iYear, iMonth)
var i = 0
for (w = 0w <6w++)
for (d = 0d <7d++)
with (cellText[(7*w)+d]) {
Victor = i++
if (myMonth[w+1][d]<0) {
color = gcGray
innerText = -myMonth[w+1][d]
}else{
color = ((d==0)||(d==6))?"#FF3300":"#009900"
innerText = myMonth[w+1][d]
}
}
updatePopup(VicPopCal.innerHTML)
}
function fSetYearMon(iYear, iMon){
tbSelMonth.options[iMon-1].selected = true
for (i = 0i <tbSelYear.lengthi++)
if (tbSelYear.options[i].value == iYear){
tbSelYear.options[i].selected = true
}
fUpdateCal(iYear, iMon)
}
function fGetXY(aTag){
var oTmp = aTag
var pt = new Point(0,0)
do {
pt.x += oTmp.offsetLeft
pt.y += oTmp.offsetTop
oTmp = oTmp.offsetParent
} while(oTmp.tagName!="BODY")
return pt
}
// Main: popCtrl is the widget beyond which you want this calendar to appear
// dateCtrl is the widget into which you want to put the selected date.
// i.e.: <input type="text" name="dc" style="text-align:center" readonly><INPUT type="button" value="V" onclick="fPopCalendar(dc,dc)return false">
function fPopCalendar(popCtrl, dateCtrl,strDate){
previousObject = popCtrl
gdCtrl = dateCtrl
SynCtl = strDate
fInitialDate(strDate)
fSetYearMon(giYear, giMonth)
var point = fGetXY(popCtrl)
with (VicPopCal.style) {
left = point.x
top = point.y+popCtrl.offsetHeight
//width = VicPopCal.offsetWidth
width = 206// Added by Danian Zhang/SUI
height = VicPopCal.offsetHeight
// visibility = 'visible'
}
updatePopup(VicPopCal.innerHTML)
var popLeft=parseInt(VicPopCal.style.left)
var popTop=parseInt(VicPopCal.style.top)
var popWidth=parseInt(VicPopCal.style.width)
var popHeight=parseInt(VicPopCal.style.height)
oPopup.show(popLeft,popTop,popWidth,popHeight,document.body)
}
function fPopSimulateCalendar(popCtrlID, dateCtrlID,strDate){
var itemID
var popCtrl,dateCtrl
with (document.all.tags("INPUT")){
for (i=0i<lengthi++){
if(item(i).type=="text"){
itemID=item(i).id
if(itemID.indexOf(popCtrlID)>-1){
popCtrl=item(i)
dateCtrl=item(i)
break
}
}
}
}
previousObject = popCtrl
gdCtrl = dateCtrl
SynCtl = strDate
fInitialDate(strDate)
fSetYearMon(giYear, giMonth)
var point = fGetXY(popCtrl)
with (VicPopCal.style) {
left = point.x
top = point.y+popCtrl.offsetHeight
//width = VicPopCal.offsetWidth
width = 206// Added by Danian Zhang/SUI
height = VicPopCal.offsetHeight
// visibility = 'visible'
}
updatePopup(VicPopCal.innerHTML)
var popLeft=parseInt(VicPopCal.style.left)
var popTop=parseInt(VicPopCal.style.top)
var popWidth=parseInt(VicPopCal.style.width)
var popHeight=parseInt(VicPopCal.style.height)
oPopup.show(popLeft,popTop,popWidth,popHeight,document.body)
}
function updatePopup(innerString){
var oPopupBody = oPopup.document.body
oPopupBody.innerHTML =innerString
}
// Added by Danian Zhang/SUI
function fInitialDate(strDate){
if( strDate == null || strDate.length != 10 )
return false
var sYear = strDate.substring(0,4)
var sMonth = strDate.substring(5,7)
var sDay = strDate.substring(8,10)
if( sMonth.charAt(0) == '0' ) { sMonth = sMonth.substring(1,2)}
if( sDay.charAt(0) == '0' ) { sDay = sDay.substring(1,2) }
var nYear = parseInt(sYear )
var nMonth = parseInt(sMonth)
var nDay = parseInt(sDay )
if ( isNaN(nYear ) ) return false
if ( isNaN(nMonth) ) return false
if ( isNaN(nDay ) ) return false
var arrMon = new Array(12)
arrMon[ 0] = 31arrMon[ 1] = nYear % 4 == 0 ? 29:28
arrMon[ 2] = 31arrMon[ 3] = 30
arrMon[ 4] = 31arrMon[ 5] = 30
arrMon[ 6] = 31arrMon[ 7] = 31
arrMon[ 8] = 30arrMon[ 9] = 31
arrMon[10] = 30arrMon[11] = 31
if ( nYear <1900 || nYear >2100 ) return false
if ( nMonth <1 || nMonth >12 )return false
if ( nDay <1 || nDay >arrMon[nMonth - 1] ) return false
giYear = nYear
giMonth = nMonth
giDay = nDay
return true
}
var gMonths = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月")
with (document) {
write("<Div id='VicPopCal' onblur='parent.shutup()' style='OVERFLOW:hiddenPOSITION:absoluteVISIBILITY:hiddenwidth:180z-index:100'>")
write("<table width='100%' border='1' cellpadding='0' cellspacing='0' style='background-color:#EFF7FFborder-width:1px border-color:#3399CC'>")
write("<TR><TD>")
write("<table width='100%' border='0' cellpadding='0' cellspacing='0' >")
write("<TR>")
write("<td valign='middle' align='center' style='font-size:9ptbackground-color:#EFF7FF' HEIGHT='28'>")
write("<SELECT name='tbSelYear' onChange='parent.fUpdateCal(tbSelYear.value, tbSelMonth.value)' style='width:80' Victor='Won'>")
for(i=1900i<2050i++)
write("<OPTION value='"+i+"'>"+i+" 年</OPTION>")
write("</SELECT>")
write(" <select name='tbSelMonth' onChange='parent.fUpdateCal(tbSelYear.value, tbSelMonth.value)' style='width:80' Victor='Won'>")
for (i=0i<12i++)
write("<option value='"+(i+1)+"'>"+gMonths[i]+"</option>")
write("</SELECT>")
write("</td>")
write("</TR><TR>")
write("<td align='center'>")
write("<table width='95%' border='1' cellspacing='0' cellpadding='0' bordercolordark='#639ace' bodercolorlight='#ffffff'>")
fDrawCal(giYear, giMonth, 20, '9pt')
write("</table>")
write("</td>")
write("</TR><TR><TD align='center'>")
write("<TABLE width='98%'><TR><TD nowrap align='center' HEIGHT='25'>")
write("<span style='cursor:handfont-size:9pt' onclick='parent.fSetDate(0,0,0)' onMouseOver='this.style.color=parent.overcolor' onMouseOut='this.style.color=0'>清空</span>")
write("</td><td algin='center' HEIGHT='25'>")
write("<span style='cursor:handfont-size:9pt' onclick='parent.fSetDate("+giYear+","+giMonth+","+giDay+")' onMouseOver='this.style.color=parent.overcolor' onMouseOut='this.style.color=0'> 今天: "+giYear+"-"+giMonth+"-"+giDay+"</span></td>")
write("<td nowrap HEIGHT='25'><span style='cursor:handfont-size:9pt' onMouseOver='this.style.color=parent.overcolor' onMouseOut='this.style.color=0' onclick='parent.shutup()'>关闭</span></td></tr></table>")
write("</TD></TR>")
write("</TABLE></TD></TR></TABLE></Div>")
}
</script>
添加一个按钮：
<button onclick="fPopCalendar(invalidateDate,invalidateDate)return false" name="button" type="button">q</button>
我这js都写的这么明白了！你还不知道怎么弄啊？
用两个DIV，主要由Javascript控制第2个DIV的显示，就可以做出来了。代码如下，自己看看吧：
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void calEventDate_SelectionChanged(object sender, EventArgs e)
{
txtEventDate.Text = calEventDate.SelectedDate.ToString("d")
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblResult.Text = "You picked: " + txtEventDate.Text
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<script type="text/javascript">
function displayCalendar()
{
var datePicker = document.getElementById('datePicker')
datePicker.style.display = 'block'
}
</script>
<style type="text/css">
</style>
<title>Calendar with JavaScript</title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<asp:Label
id="lblEventDate"
Text="Event Date:"
AssociatedControlID="txtEventDate"
Runat="server" />
<asp:TextBox
id="txtEventDate"
Runat="server" />
<img src="Calendar.gif" onclick="displayCalendar()" />
<div id="datePicker">
<asp:Calendar
id="calEventDate"
OnSelectionChanged="calEventDate_SelectionChanged"
Runat="server" />
</div>
<br />
<asp:Button
id="btnSubmit"
Text="Submit"
Runat="server" OnClick="btnSubmit_Click" />
<hr />
<asp:Label
id="lblResult"
Runat="server" />
</div>
</form>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）