在文本框下加一个日历控件，在单击文本框事中显示日历控件，选择好日期后隐藏日历控件.

fyzx007 2008-07-19 10:14:25

各位老大,制作的原理我都知道了,就是想看看源代码
请问谁有发给我学习一下!
以下是以前一个网友提问,一个叫bbdog（贝贝狗）的回复.

你的问题表述得已经很清楚了，下面我来说说我的实现方法。

1、先将日历控件在一个独立的FormRiqi中做好；
2、在Edit1的相应事件中（比如单击），显示上面的那个FormRiqi；
3、选好想要的日期后，存在全局变量gl_riqi中；
4、关闭FormRiqi，Edit1中的值为gl_riqi；

在实际使用中，我没有将日历的显示和文本的单击事件相关联，文本框只用来显示日期，
我在文本框后面放了一个带图像的Button，点那个Button，显示FormRiqi，你想怎么做
都行。

bbdog（贝贝狗）说的原理很清楚,但我希望看看源代码,谢谢了!!

...全文

424 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

amandag 2008-07-19

打赏
举报

asp.net ajaxToolkit下的CalendarExtender 轻松实现此功能

llainn 2008-07-19

打赏
举报

用过jquery做的.非常不错.

soulking 2008-07-19

打赏
举报

用JavaScript比较好。

amanizty 2008-07-19

打赏
举报

路过~

yagebu1983 2008-07-19

打赏
举报

你的隐藏它！！！
function hiddenCalendar(){getObjectById("meizzCalendarLayer").style.display = "none";};

fyzx007 2008-07-19

打赏
举报

是这样的,我做了一个
一个文本框,后面加个隐藏的日历控件,再后跟一个button控件,点Button,日历控件显示,选择日期后,将值写入文本框,再将日历控件隐藏.

关键是日历控件显示的时候,要占用空间,把表单挤的不成样子了

不好看

如何使日历控件显示的时候不占用网页的空间,请指教!

zkcq2004 2008-07-19

打赏
举报

http://www.lingye.net/demo/calendar/js/calendar.js

fyzx007 2008-07-19

打赏
举报

非常感啊,有使用ASP.NET的日历控件,实现此功能的吗?

dengchenlu 2008-07-19

打赏
举报

有这样的控件下的
InputCalendar
WebCalendar

mengjun5200 2008-07-19

打赏
举报

用js也行

lihongdian 2008-07-19

打赏
举报

去下个控件,,需要服务器控件编程.或者直接用js做的控件

loverdotnet 2008-07-19

打赏
举报

<SCRIPT LANGUAGE="JavaScript">

</script>
<body>
<form name="frmCalendarSample" method="post" action="">
<input type="hidden" name="calSelectedDate" value="">
<table border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td>
<select name="tbSelMonth" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>
</td>
</tr>
<tr>
<td>
<script language="JavaScript">
var dCurDate = new Date();
fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);
</script>
</td>
</tr>
</table>
</form>

loverdotnet 2008-07-19

打赏
举报

loverdotnet 2008-07-19

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script language="JavaScript">
<!--
document.write("<style>");
document.write("#__calendar{width:147px;margin:0;padding:0;}");
document.write("#calendarTable{ margin:0;padding:0;border:1px solid #000;}");
document.write("th,td{margin:0;padding:0px}");
document.write("#calendarTable th ,#calendarTable td{font:12px/20px 宋体,Arial,sans-serif;text-align:center;}");
document.write("#calendarTable thead th.week{border-top:1px solid #CCC;border-bottom:1px solid #ccc;background:#EEE;}");
document.write("#calendarTable thead tr.function th{border:1px solid #fff}");
document.write("#calendarTable thead tr.top{letter-spacing:1px;}");
document.write("#calendarTable thead a{color:#000;width:19px;height:18px;text-decoration:none;display:block;border:1px solid #ccc;background:#E1F1FF;}");
document.write("#calendarTable tbody a:hover{color:#990;width:19px;height:18px;text-decoration:none;display:block;border:1px solid #ccc;background:#E1F1FF;}");
document.write("#calendarTable thead a.today{width:98% !important;width:100%}");
document.write("#calendarTable thead a.today:hover{width:98% !important;width:100%}");
document.write("#calendarTable td{width:21px;height:20px;border-bottom:1px solid #E6E6E6;color:#fff;}");
document.write("#calendarTable th{height:21px;}");
document.write("#calendarTable tr.com{background:#fff;}");
document.write("#calendarTable tr.cur{background:#F0FAFF;}");
document.write("#calendarTable tbody a{color:#000;width:19px;height:18px;text-decoration:none;display:block;border:1px solid #fff;}");
document.write("#calendarTable tbody a:hover{color:#990;width:19px;height:18px;text-decoration:none;border:1px solid #E6E6E6;background:#E1F1FF;display:block;}");
document.write("#calendarTable tbody a.today{color:#c00;border:1px solid #DBDBDB;background:#CCE4FF;}");
document.write("#calendarTable tbody a.today:hover{color:#990;border:1px solid #DBDBDB;background:#CCE4FF;}");
document.write("#calendarTable tbody a.week{color:#c00;}");
document.write("</style>");
document.write("<div id='__calendar' style='position:absolute;display:none;'></div>");
document.write("<table cellspacing=\"0\" cellpadding=\"0\" id=\"calendarTable\"><thead><tr class=\"top\"><th> </th><th colspan=\"5\" id=\"sohwdate\"></th><th><a href=\"javascript:void(0);\" title=\"close\" onclick=\"shut()\">×</a></th></tr><tr class=\"function\"><th><a href=\"javascript:void(0);\" title=\"向前翻1年\" onclick=\"preYear()\"><<</a></th><th><a href=\"javascript:void(0);\" title=\"向前翻1月\" onclick=\"preMonth()\"><</a></th><th colspan=\"3\"><a href=\"javascript:void(0);\" class=\"today\" title=\"今天\" onclick=\"getDate('0')\">今天</a></th><th><a href=\"javascript:void(0);\" title=\"向后翻1月\" onclick=\"nextMonth()\">></a></th><th><a href=\"javascript:void(0);\" title=\"向后翻1年\" onclick=\"nextYear()\">>></a></th></tr><tr><th class=\"week\">日</th><th class=\"week\">一</th><th class=\"week\">二</th><th class=\"week\">三</th><th class=\"week\">四</th><th class=\"week\">五</th><th class=\"week\">六</th></thead><tbody id=\"calendarTbody\"></tbody></table>");
var objouter;
var objInput;
var isShow = true;
objouter=document.getElementById("__calendar");
var calendarTable = document.getElementById("calendarTable");
objouter.appendChild(calendarTable);
function setday(obj){objInput = obj;writeDate();sohwDate();objouter.style.top =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput);objouter.style.left =getAbsoluteLeft(objInput);objouter.style.display = "block";}
function getAbsoluteHeight(ob){return ob.offsetHeight;}
function getAbsoluteWidth(ob){return ob.offsetWidth;}
function getAbsoluteLeft(ob){var s_el=0;el=ob;while(el){s_el=s_el+el.offsetLeft;el=el.offsetParent;}; return s_el}
function getAbsoluteTop(ob){var s_el=0;el=ob;while(el){s_el=s_el+el.offsetTop ;el=el.offsetParent;}; return s_el}
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var toDay = new Date();
var tempYear = toDay.getFullYear();
var tempMonth = toDay.getMonth();
var tbody = document.getElementById("calendarTbody");
var sohwId = document.getElementById("sohwdate");
function getDays(month, year)
{
if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400) ? 29 : 28;
else return daysInMonth[month];
}
function writeDate() {
var curCal = new Date(tempYear,tempMonth ,1);
var startDay = curCal.getDay();
var daily = 0;
var today = toDay.getDate();
if(tempYear != toDay.getFullYear() || tempMonth != toDay.getMonth()) today = -1;
var todayStyle = "";
var weekEndStyle = "";
clear();
var intDaysInMonth =getDays(curCal.getMonth(), curCal.getFullYear());
var weeks = (intDaysInMonth + startDay) % 7 == 0 ? (intDaysInMonth + startDay) / 7 : parseInt((intDaysInMonth + startDay ) / 7) + 1;
for (var intWeek = 1; intWeek <= weeks; intWeek++){
var tr = document.createElement("tr");
tr.setAttribute("onmouseover","javascript:this.className='cur'");
tr.setAttribute("onmouseout","javascript:this.className='com'");
tr.onmouseover = function (){this.className = "cur";}
tr.onmouseout = function (){this.className = "com";}
for (var intDay = 0;intDay < 7;intDay++){
var td = document.createElement("td");
if ((intDay == startDay) && (0 == daily))
daily = 1;

if(today == daily) todayStyle="today";

if (intDay == 6 || intDay == 0) weekEndStyle = "week" ;

if ((daily > 0) && (daily <= intDaysInMonth))
{
td.innerHTML = "<a href=\"javascript:void(0);\" class=\""+ weekEndStyle + todayStyle +"\" onclick=\"getDate('"+daily+"')\" title=\""+eval(tempMonth+1)+"月"+daily+"日\">" + daily + "</a>";
todayStyle = "";
weekEndStyle = "";
daily++;
}else{
td.innerHTML = " ";
todayStyle = "";
weekEndStyle = "";
}
tr.appendChild(td);
}
tbody.appendChild(tr);
}
}

loverdotnet 2008-07-19