更正一下selectDate()函数
function selectDate(){
var i = parseInt(window.event.srcElement.innerText);
if ((!isNaN(i)) && (i<3000)){
activeDate.setFullYear(date.getFullYear(),date.getMonth(),i);
fillCalendar(activeDate);
}
fillInput.value=activeDate.getFullYear()+'-'+(activeDate.getMonth()+1)+"-"+activeDate.getDate();//原先+i好像会出错,+activeDate.getDate()应该不会出错
}
function selectDate(){
var i = parseInt(window.event.srcElement.innerText);
if ((!isNaN(i)) && (i<3000)){
activeDate.setFullYear(date.getFullYear(),date.getMonth(),i);
fillCalendar(activeDate);
}
fillInput.value=activeDate.getFullYear()+'-'+(activeDate.getMonth()+1)+"-"+activeDate.getDate();//原先+i好像会出错,+activeDate.getDate()应该不会出错
}
解决方案 »
- 求splitbutton 的jquery代码
- 关于按CTRL—ENTER和ENTER提交表单的问题
- Listbox,如何加入水平滚动条?
- extjs中textfield中输入空格到后台变成’+‘
- 为什么jquery的wrapInner()方法添加标签到页面,获取不到高度?
- 这段滚动代码在谷歌、360浏览器、搜狗浏览器都不能滚动
- 怎样在 onreadystatechange 事件中找到产生事件的对象?
- 如何让javascript读取出来的COOKIES内容显示中文?
- 关于文本循环的问题
- 求一正则表达式!!!急!!
- 不用层的话,javascript怎么实现这个简单的功能啊??
- 如何使打印出来的web页不包括网址,页脚等信息?
function selectDate(){
var i = parseInt(window.event.srcElement.innerText);
if ((!isNaN(i)) && (i<3000)){
activeDate.setFullYear(date.getFullYear(),date.getMonth(),i);
fillCalendar(activeDate);
}
fillInput.value=activeDate.getFullYear()+'-'+(activeDate.getMonth()+1)+"-"+activeDate.getDate();
closeCalendar();//关掉日历
}
点击没有日期的区域会出现"2003-2-NaN"
如果输入老总的生日1945-01-03,用这个就不怎么方便,要点几十下才成
最好双击选择日期后能自行关闭
输入框内的值与日历脱节了
输入框点击后就blur掉不合惯(用tab键还是可以focus)
应该有一个返回空的功能,不然清空一个值比填一个值还不方便
1、将关闭按钮移到下面;
2、增加清空按钮,清空输入框;
3、增加当前日期按钮,回到当前日期
4、增加年份输入框,可跳转到指定年份;
5、修正日期显示错误;
6、输入框响应onfocus,这样tab键也可以响应
<HTML>
<HEAD>
<TITLE> 日历 </TITLE>
<style>
BODY {FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-TOP: 2px; TEXT-ALIGN: center}
.boxinput{BORDER: #000000 1pt solid; background-color: #F2F2F2;FONT-SIZE: 9pt;}
</style>
<SCRIPT LANGUAGE="JavaScript">
var activeDate = new Date();var tbl = window.document.createElement("<TABLE style=\"background:white;border:1px solid #003399;width:100%;height:100%;font:9pt arial;\" cellspacing=0>");
var tblhd = window.document.createElement("THEAD");
var tblbd = window.document.createElement("TBODY"); var anchorPriorYear = window.document.createElement("A");
anchorPriorYear.style.fontFamily = "webdings";
anchorPriorYear.style.color="white";
anchorPriorYear.style.cursor = "hand";
anchorPriorYear.innerText = "7";
anchorPriorYear.title = "上一年";
var anchorPriorMonth = window.document.createElement("A");
anchorPriorMonth.style.fontFamily = "webdings";
anchorPriorMonth.style.color="white";
anchorPriorMonth.style.cursor = "hand";
anchorPriorMonth.innerText = "3";
anchorPriorMonth.title = "上一月";
var anchorNextMonth = window.document.createElement("A");
anchorNextMonth.style.fontFamily = "webdings";
anchorNextMonth.style.cursor = "hand";
anchorNextMonth.style.color="white";
anchorNextMonth.innerText = "4";
anchorNextMonth.title = "下一月";
var anchorNextYear = window.document.createElement("A");
anchorNextYear.style.fontFamily = "webdings";
anchorNextYear.style.cursor = "hand";
anchorNextYear.style.color= "white";
anchorNextYear.innerText = "8";
anchorNextYear.title = "下一年";
var anchorClose = window.document.createElement("A");
anchorClose.style.fontFamily = "wingdings";
anchorClose.style.cursor = "hand";
anchorClose.style.color= "white";
anchorClose.innerText = "x";
anchorClose.title = "关闭";
var anchorClear = window.document.createElement("A");
anchorClear.style.fontFamily = "wingdings";
anchorClear.style.cursor = "hand";
anchorClear.style.color= "white";
anchorClear.innerText = "/";
anchorClear.title = "清空";
var anchorCurrent = window.document.createElement("A");
anchorCurrent.style.fontFamily = "webdings";
anchorCurrent.style.cursor = "hand";
anchorCurrent.style.color= "white";
anchorCurrent.innerText = "q";
anchorCurrent.title = "回到当前日期";
var inputYear = window.document.createElement("INPUT");
inputYear.style.width="28px";
inputYear.style.height="15px";
inputYear.maxLength="4";
inputYear.className="boxinput";
inputYear.value=activeDate.getFullYear();
inputYear.title = "输入年份";
var goButton= window.document.createElement("A");
goButton.style.fontFamily = "webdings";
goButton.style.cursor = "hand";
goButton.style.color="white";
goButton.innerText = "8";
goButton.title = "跳转";
var ynm = window.document.createElement("FONT");
ynm.style.width = "60%";
ynm.style.fontWeight = "bold";
var cpt = window.document.createElement("CAPTION");
var tblfd = window.document.createElement("TFOOT");
tbl.appendChild(cpt);
tbl.appendChild(tblhd);
tbl.appendChild(tblbd);
tbl.appendChild(tblfd);var fillInput;
var calshow=false;window.onload=function(){
initcal();
}function initcal(){
inithead();
initbody();
inittail();
calendar.appendChild(tbl);
fillCalendar(activeDate);
tblbd.attachEvent("onclick",selectDate);
tblbd.attachEvent("onkeydown",moveDate);
anchorPriorYear.attachEvent("onclick",goPriorYear);
anchorPriorMonth.attachEvent("onclick",goPriorMonth);
anchorNextMonth.attachEvent("onclick",goNextMonth);
anchorNextYear.attachEvent("onclick",goNextYear);
anchorClose.attachEvent("onclick",closeCalendar);
anchorClear.attachEvent("onclick",clearValue);
anchorCurrent.attachEvent("onclick",goCurrent);
goButton.attachEvent("onclick",goYear);
} function inithead(){
cpt.style.backgroundColor = "#003399";
cpt.style.color = "white";
cpt.style.textAlign = "center";
cpt.appendChild(anchorPriorYear);
cpt.appendChild(anchorPriorMonth);
cpt.appendChild(ynm);
cpt.appendChild(anchorNextMonth);
cpt.appendChild(anchorNextYear);
var row = tblhd.insertRow();
row.align = "center";
var weekStr = new Array("日","一","二","三","四","五","六");
for (var i=0;i<weekStr.length;i++){
var cell = row.insertCell();
cell.innerText = weekStr[i];
cell.style.borderBottom = "solid 1px";
cell.style.cursor = "default";
cell.align = "center";
if(i==0||i==6)cell.style.color="red";
}
}function initbody(){
for (var i=0;i<6;i++){
var row = tblbd.insertRow();
for (var j=0;j<7;j++){
var cell = row.insertCell();
cell.innerHTML = " ";
cell.style.cursor = "default";
cell.align = "center";
}
}
}function inittail(){
var row = tblfd.insertRow();
row.style.backgroundColor = "#003399";
row.style.color = "white";
var cell = row.insertCell();
cell.colSpan=3
cell.style.height=7
cell.style.paddingLeft="4px";
cell.align = "left";
cell.appendChild(inputYear);
cell.appendChild(goButton);
cell = row.insertCell();
cell.colSpan=4;
cell.align = "right";
cell.appendChild(anchorClear);
cell.appendChild(anchorCurrent);
cell.appendChild(anchorClose);
}function fillCalendar(adate){
ynm.innerText = adate.getFullYear() + "年" + (adate.getMonth() + 1) + "月";
var tempdate = new Date();
tempdate.setFullYear(adate.getFullYear(),adate.getMonth(),1);
var first = true;
for (var i=0;i<tblbd.rows.length;i++){
for (var j=0;j<tblbd.rows(i).cells.length;j++){
var cell = tblbd.rows(i).cells(j);
cell.innerHTML = " ";
cell.bgcolor = "";
cell.title = "";
if(j==0||j==6) cell.style.color="red";
else cell.style.color="black";
cell.style.backgroundColor = "";
if (tempdate.getDay() == j){
if (!first) continue;
cell.innerText = tempdate.getDate();
var today=new Date();
if (tempdate.getDate() == activeDate.getDate()){
cell.setAttribute("active",true);
hightLightDate(cell);
}
tempdate.setFullYear(tempdate.getFullYear(),tempdate.getMonth(),tempdate.getDate()+1);
first = tempdate.getDate() > 1;
}
}
}
}function hightLightDate(object){
var tds = tblbd.all.tags("TD");
for (var i=0;i<tds.length;i++){
if (tds(i) != object){
tds(i).style.backgroundColor = tds(i).bgcolor;
tds(i).style.color = tds(i).style.color
}
else{
tds(i).style.backgroundColor = "red";
tds(i).style.color = "white";
}
}
}function selectDate(){
var i = parseInt(window.event.srcElement.innerText);
if ((!isNaN(i)) && (i<3000)){
activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),i);
fillCalendar(activeDate);
}
fill();
}function fill(){
fillInput.value=activeDate.getFullYear()+'-'+(activeDate.getMonth()+1)+"-"+activeDate.getDate();
}function moveDate(){
var k = window.event.keyCode;
switch(k){
case 37: activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()-1);
break;
case 38: activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()-7);
break;
case 39: activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()+1);
break;
case 40: activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()+7);
break;
}
fillCalendar(activeDate);
fill();
}function goNextMonth(){
activeDate.setMonth(activeDate.getMonth()+1,activeDate.getDate());
fillCalendar(activeDate);
fill();
}function goNextYear(){
activeDate.setFullYear(activeDate.getFullYear()+1,activeDate.getMonth(),activeDate.getDate());
fillCalendar(activeDate);
fill();
}
activeDate.setFullYear(activeDate.getFullYear()-1,activeDate.getMonth(),activeDate.getDate());
fillCalendar(activeDate);
fill();
}function goYear(){
activeDate.setFullYear(inputYear.value,activeDate.getMonth(),activeDate.getDate());
fillCalendar(activeDate);
fill();
}function goPriorMonth(){
activeDate.setMonth(activeDate.getMonth()-1,activeDate.getDate());
fillCalendar(activeDate);
fill();
}function clearValue(){
fillInput.value="";
}function goCurrent(){
activeDate=new Date();
fillCalendar(activeDate);
fill();
}function showCalendar(e){
calendar.style.top=e.offsetTop+e.offsetHeight;
calendar.style.left=e.offsetLeft;
calshow=true;
fillInput=e;
calendar.style.display="block";
}function hiddenCal()
{
if(!calshow)calendar.style.display="none";
}function closeCalendar()
{
calshow=false;
calendar.style.display="none";
}
</SCRIPT>
</HEAD>
<BODY onclick="hiddenCal()">
开始日期:<INPUT TYPE="TEXT" onfocus="showCalendar(this);this.blur();" class="boxinput" onmouseout="calshow=false"/>
结束日期:<INPUT TYPE="TEXT" onfocus="showCalendar(this);this.blur();" class="boxinput" onmouseout="calshow=false"/>
<div id="calendar" style="position:absolute;height:140px;width:160px;display:none;border:1px inset #003399;" onmouseover="calshow=true" onmouseout="calshow=false"/>
</BODY>
</HTML>
俺今晚也写了一个日历,感觉还不错。
程序代码量不多,总共一百五十行左右
在Fontpage4.0.2下测试通过
希望能有人喜欢。这一个日历用了俺以前写的一个弹出框方式的日历,它的代码量还少一些。<!--本页面一定要在inrame里运行,文件名为calendar2.htm-->
<html>
<head>
<title>日历</title>
<style>
TD,INPUT{font-size:9pt;}
td.titleTd{background-color:#5661a8;color: #ffffff;text-align:center;text-decoration:blink;font-weight:900;};
td{white-space:nowrap};
body{margin-left:0;margin-right:0;margin-top=0;margin-bottom=0};
</style>
</head><body><table align=center><tr><td width=50% >
<script language=javascript>
document.write("<select name=yearInput onchange='showCalendar()'>");
for (var i=1930;i<2200;i++) document.write("<option value='"+i+"'>"+i+"</option>");
document.write("</select>年<select name=monthInput onchange='showCalendar()'>");
for (var i=1;i<13;i++) document.write("<option value='"+i+"'>"+i+"</option>");
document.write("</select>月");
</script>
</td><td align=right>
<input type=button value=今天 onclick='returnToday();'>
<input type=button value=返回空 onclick='returnNull();'>
</td></tr></table>
<div id="theCalendar" align=center width=100% >
</div>
</body>
</html><script language="javascript">
function showCalendar()
{
var theCalendarContent="";
var b=new Date(yearInput.value+"\/"+monthInput.value+"\/"+1);
var c=new Date(yearInput.value+"\/"+(monthInput.value*1+1)+"\/"+0);
var theMonthDays=c.getDate();
var i=0;
var j=b.getDay();
var k=1;
theCalendarContent+="<table ondblclick='getTD(event.srcElement)' onmousemove='changeBgcolor(event.srcElement)' border=1 style='border: solid 1 #5661a8; font-Size: 9pt; font-family: Arial; background: #e0e3f7' width=100% align=center>";
theCalendarContent+="<tr bordercolorlight='#5661a8' bordercolordark='#5661a8' ><td class=titleTd >周日</td><td class=titleTd >周一</td><td class=titleTd >周二</td><td class=titleTd >周三</td><td class=titleTd >周四</td><td class=titleTd >周五</td><td class=titleTd >周六</td></tr><tr>";
for (j=0;j<b.getDay();j++) theCalendarContent+="<td> </td>";
for (i=0;(i<6)&&(k<theMonthDays+1);i++)
{
for (j;j<7;j++)
{
if (k<theMonthDays+1)
{
if (j<6&&j>0) theCalendarContent+="<td bordercolorlight='#5661a8' align='center' style='color:#ff0000'>"+(k++)+"</td>";
else theCalendarContent+="<td bordercolorlight='#5661a8' align='center'>"+(k++)+"</td>";
}
else theCalendarContent+="<td> </td>";
}
theCalendarContent+="</tr><tr >";
j=0;
}
theCalendarContent+="</tr></table>";
theCalendar.innerHTML=theCalendarContent;
}
function getTD(obj)//返回选取的日期
{
if (obj.tagName!="TD") return false;
if (isNaN(obj.innerText)||(obj.innerText==0)) return false;
var a=yearInput.value+"-"+monthInput.value+"-"+obj.innerText;
window.parent.currentDateInput.value=a;
window.parent.theCalendarIframe.style.display="none";
}
function returnToday()//返回当前日期
{
var todaydate=new Date();
var a=todaydate.getFullYear()+"-"+(todaydate.getMonth()+1)+"-"+todaydate.getDate();
window.parent.currentDateInput.value=a;
window.parent.theCalendarIframe.style.display="none";
} function returnNull()//返回空
{
window.parent.currentDateInput.value="";
window.parent.theCalendarIframe.style.display="none";
} function initCalendar()//初始化日历
{
var a="";
try{a=window.parent.currentDateInput.value;}
catch(exception){;}
a=a.replace(/-/g,"/");
var b=new Date(a);
if (isNaN(b)) b=new Date();
yearInput.value=b.getFullYear();
monthInput.value=(b.getMonth()+1);
showCalendar();
}
initCalendar();var theCurrentTd="";//记录当前鼠标所在TD
function changeBgcolor(obj)//改变当前鼠标所在td的颜色
{
if ((theCurrentTd!=obj)&&(obj.parentElement.rowIndex!=0))
{
if(theCurrentTd.tagName=="TD") theCurrentTd.style.background="";
theCurrentTd=obj;
if(theCurrentTd.tagName=="TD") theCurrentTd.style.background="#9999ee";
}
return false;
}
</script>█████████████████████████████████████████
<!--本页是使用实例---------->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>New Page 2</title>
</head><body onclick="if(event.srcElement!=currentDateInput)theCalendarIframe.style.display='none';">时间1<input onfocus="getDateFromIframe(this);" ><br>
时间2<input onfocus="getDateFromIframe(this);" ><br>
时间3<input onfocus="getDateFromIframe(this);" ><br>
时间4<input onfocus="getDateFromIframe(this);" ><br><!--以下一段是日期弹出框所需内容-->
<iframe id=calendarIframe src="about:blank" scrolling=no style="display:none;width:250px;height:190px;z-index:600;top:0;left:0;position:absolute;"> </iframe>
<script>
currentDateInput="";
theCalendarIframe=document.all("calendarIframe");function getDateFromIframe(obj) //利用弹出输入日期
{
currentDateInput=obj;
if (theCalendarIframe.src!="calendar2.htm") //本if判断亦可省略,结果略有差异
theCalendarIframe.src="calendar2.htm";
theCalendarIframe.style.display="";
theCalendarIframe.style.top=obj.offsetTop+20;
theCalendarIframe.style.left=obj.offsetLeft;
}
</script>
<!--以上一段是日期弹出框所需内容-->
</body>
</html>
http://expert.csdn.net/Expert/TopicView1.asp?id=1264734
挺不错。
有几点值得学习:
1.调用方法有两种:setday(this,document.all.txt)、setday(this)。
(JK认为改成setday(document.all.txt,this),setday(this)可能更合习惯
2.把内容综合到一个文件,让他人调用时比较方便。
3.可以用鼠标拖动
4.把剩余空间也利用上(加了本月前几日,后几日)有些可能需要些改进(个人之见,冒昧,见谅):
颜色艳得太女性化,花枝招展,有点像大便
有时会乱码,有时会报错(可能是对IE设置有些特殊要求)
选择年份与月份的方式怪里怪气
JK对那一个日历有那么多好的评价,可walkingpoison只看重了那一个对颜色的意见。---JK的审美观点有问题,说错了的话也不要在意。还有,那一个日历年份不是真正的下拉框,而是在点击的时候生成的一个下拉框。
我刚把它放到moz下面了呢,你的e文版又来了,赶快发布吧我好又来整整。
ver 2.0:alert(walkingpoison==meizz?"两层马夹?":"还是马夹");
呵呵,开个玩笑!!!^_^
代码倒比较少,都不超过150行,不过比模样比较寒碜,见笑了。1.弹出框方式:
http://jkisjk.vip.sina.com/code/html/forCalendar.htm2.Iframe方式
http://jkisjk.vip.sina.com/code/html/forCalendar2.htm
英文版目前来说改动还不算大,除了英化以外,也就是月份选择改成用"Jan, Feb"之类的而已。我打算在项目空闲一点的时候将这个控件再进行一点改进,主要包括下面几点:
1. 控件位置的自动调整。如果目标处在网页下放,控件就显示在上方。
2. 输入输出格式的自定义。(目前只能自定义输出格式。)
3. 可能的话,我会做出第二个颜色方案,给大家更大的选择余地。(包括颜色方案自定义)发布的时候,我会同时给出一个无注释版,尽量减小代码的体积。毕竟大多数使用情况下是不需要这些注释的(现在的注释大概都占了上百行了吧)。
var MonHead = new Array(12); //定义阳历中每个月的最大天数
MonHead[0] = 31; MonHead[1] = 28; MonHead[2] = 31; MonHead[3] = 30; MonHead[4] = 31; MonHead[5] = 30;
MonHead[6] = 31; MonHead[7] = 31; MonHead[8] = 30; MonHead[9] = 31; MonHead[10] = 30; MonHead[11] = 31;function IsPinYear(year) //判断是否闰平年
{
if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false;
}function GetMonthCount(year,month) //闰年二月为29天
{
var c=MonHead[month-1];if((month==2)&&IsPinYear(year)) c++;return c;
}//----------------------------------------------------------------------JK推荐:
function GetMonthCount(year,month) //得到某年某月的天数
{
return((new Date(year,month+1,0)).getDate());
}
原来的调用方法有两种:setday(this,document.all.txt)、setday(this)。
JK认为改成:setday(document.all.txt,this),setday(this)可能更合习惯
另外,有一段程序似乎可以简化
对比如下
function setday(tt,obj) //主调函数
{
if (arguments.length > 2){alert("对不起!传入本控件的参数太多!");return;}
if (arguments.length == 0){alert("对不起!您没有传回本控件任何参数!");return;}
var dads = document.all.meizzDateLayer.style;
var th = tt;
var ttop = tt.offsetTop; //TT控件的定位点高
var thei = tt.clientHeight; //TT控件本身的高
var tleft = tt.offsetLeft; //TT控件的定位点宽
var ttyp = tt.type; //TT控件的类型
while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
dads.top = (ttyp=="image")? ttop+thei : ttop+thei+6;
dads.left = tleft;
outObject = (arguments.length == 1) ? th : obj;
outButton = (arguments.length == 1) ? null : th; //设定外部点击的按钮
//以下这一段可以化简。JK
var reg = /^(\d+)-(\d{1,2})-(\d{1,2})$/;
var r = outObject.value.match(reg);
if(r!=null){
r[2]=r[2]-1;
var d= new Date(r[1], r[2],r[3]);
if(d.getFullYear()==r[1] && d.getMonth()==r[2] && d.getDate()==r[3]){
outDate=d; //保存外部传入的日期
}
else outDate="";
meizzSetDay(r[1],r[2]+1);
}
else{
outDate="";
meizzSetDay(new Date().getFullYear(), new Date().getMonth() + 1);
}
dads.display = ''; event.returnValue=false;
}function setday(obj,tt) //主调函数(第一个参数是日期输入框,第二个参数是用来定位的对象[可以为空])
{
if (arguments.length == 0){alert("对不起!您没有传回本控件任何参数!");return;}
var dads = document.all.meizzDateLayer.style;
var th = tt;
if(th==null) th=obj;
var ttop = tt.offsetTop; //TT控件的定位点高
var thei = tt.clientHeight; //TT控件本身的高
var tleft = tt.offsetLeft; //TT控件的定位点宽
var ttyp = tt.type; //TT控件的类型
while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
dads.top = (ttyp=="image")? ttop+thei : ttop+thei+6;
dads.left = tleft;
outObject = obj;
outButton = th; //设定外部点击的按钮
var d= new Date(outObject.value);
if(isNaN(d)) d=new Date();
outDate=d; //不大明白outDate在整个程序里的作用是什么,凭直觉,程序并不需要它。JK
meizzSetDay(d.getFullYear(),d.getMonth()+1);
dads.display = '';
event.returnValue=false;
}
1.你推荐的GetMonth的方法不错,谢谢你的建议。2.你所说的简化部分我觉得确实可以进行简化,但是不能按照你这样简化。
因为那个部分的作用是根据外部日期自动在显示的时候选中对应的日期,但是你这样做的话,就使得不论选择什么日期,都会显示当前日期了。不信你看一下就知道了。3.至于outDate的作用,你只要搜索一下文档就知道了,呵呵。
------------------------------------------------------------------ var d= new Date(outObject.value);
if(isNaN(d)) d=new Date();这两句的作用就是:
如果有外部日期,就使用外部日期:var d= new Date(outObject.value);
如果没有外部日期(包括外部日期不合法),就使用当前日期:if(isNaN(d)) d=new Date();不知是不是这么一回事?
你的这一句:if(isNaN(d)) d=new Date();判断条件有误。isNaN是判断是否为数字的,而日期再这里用isNaN的判断永远都是true。所以我需要用那么长的代码去进行判断。其实我这么长的代码已经很简洁了,我是参考了网上判断日期的经典代码写的。要简化已经很难了。
太PL了,我一直也想写一个基于TABLE的的这个东西,可是总是太不満意,
现在看了人家写的,真是好手如云的CSDN呀那个贴子中,有一个人贴了演示页面,我以后用这个了,就是得改一改色彩!!!!
看来,得写几个色调的,以后省得改了,
连大众的兰调都没有用,
而是用了一个黄的,看来,客户的眼睛真是千差万别!
-----------------------------------------------<script>
alert(isNaN(new Date()));
alert(isNaN(new Date("2002/3/6")));
alert(isNaN(new Date("fdsaf")));
</script>可以看到,alert出来的是false、false、true;
由于Date类型的根本属性是一个数值,
所以isNaN(new Date())返回的是一个false值,而不是true值;
同理,一个Date类型的变量可以进行乘除法。
如:
alert((new Date())/1);
同时增加一个功能,根据输入框中的数据直接定位到相应日期,所以增加两个函数
trimAll()//消除前后空格
validateDate()//检验输入框中的数据是否是日期格式function showCalendar(e){
fillInput=e;
var inputValue=trimAll(e.value);
var h=e.offsetHeight;
if(inputValue!=""&&validateDate(inputValue))
{
var inputDate=inputValue.split("-");
activeDate.setFullYear(inputDate[0],inputDate[1]-1,inputDate[2]);
fillCalendar(activeDate);
}
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
calendar.style.pixelTop=t+h;
calendar.style.pixelLeft=l;
calshow=true;
calendar.style.display="block";
}function trimAll( strValue ) {//删除前后空格
var objRegExp = /^(\s*)$/;
if(objRegExp.test(strValue)) {
strValue = strValue.replace(objRegExp, '');
if( strValue.length == 0)
return strValue;
}
objRegExp = /^(\s*)([\W\w]*)(\b\s*$)/;
if(objRegExp.test(strValue)) {
strValue = strValue.replace(objRegExp, '$2');
}
return strValue;
}function validateDate( strValue ) {//验证日期
var objRegExp = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/
if(strValue=="") return true;
else if(!objRegExp.test(strValue))
return false;
else{
var arrayDate = strValue.split(RegExp.$1);
var intDay = parseInt(arrayDate[2],10);
var intYear = parseInt(arrayDate[0],10);
var intMonth = parseInt(arrayDate[1],10);
if(intMonth > 12 || intMonth < 1) {
return false;
}
var arrayLookup = { '01' : 31,'03' : 31, '04' : 30,'05' : 31,'06' : 30,'07' : 31,'08' : 31,'09' : 30,'10' : 31,'11' : 30,'12' : 31,'1' : 31,'3' : 31, '4' : 30,'5' : 31,'6' : 30,'7' : 31,'8' : 31,'9' : 30}
if(arrayLookup[arrayDate[1]] != null) {
if(intDay <= arrayLookup[arrayDate[1]] && intDay != 0)
return true;
}
var booLeapYear = (intYear % 4 == 0 && (intYear % 100 != 0 || intYear % 400 == 0));
if( ((booLeapYear && intDay <= 29) || (!booLeapYear && intDay <=28)) && intDay !=0)
return true;
}
return false;
}注:我的日历是用div实现的,所以无法掩盖select框,所以可以考虑用iframe实现,或者隐藏下面的select框
所以isNaN(new Date())返回的是一个false值,而不是true值
------------------------------------------------------
这一点我倒还真不知道,恕我浅薄了。
但是问题是,你不能要求日历的格式正是你需要的yyyy/MM/dd。请试一下以下代码:
alert(isNaN(new Date("2003-3-6")))
alert(isNaN(new Date("2003/03")))
对于这些,就显得有些无能为力了。特别是第一条,那个正是我现在使用的输入格式,所以就会出问题了。
至于通用的输入输出格式,我目前正在考虑。但是可以肯定的就是,用一句isNaN的判断是无法做到的。
JK个人认为用这种形式来判断是否为日期比用正则表达式要好,尽管它有许多不足。
其实JK没有想强制说服谁,各人的方法有各自的好处,绝大多数人以为自己的孩子漂亮很符合规律。
JK在此为自己冒昧发表意见一事表示诚恳道歉:对不起
呵呵,我并没有要跟你争或者互相比谁的技术好的意思。
只是在跟你探讨而已,技术是越探讨越进步的。所以也不用说什么道歉之类的话:)
我不是从你这里学到了日期可以用isNaN来判断么?探讨还是可以继续进行的,这样才可以让你我和大家都受益。论题:为何我不用isNaN来判断日期?
1.因为这个方法不符合通用格式的要求。我可能用横杠、斜杠来分隔,甚至可能用点号(.)来分隔(这个也是合法的),可能是2002-3-6,也可能是3-6-2002。
2.因为我不但要判断是否为日期,还要判断是否为合法的日期。如果你使用alert(isNaN(new Date("2003/3/32")));就会发现,返回的也是false。说实话,以上第一点在我2.0版本的日历控件里面并不能处理,因为我定死了使用yyyy-MM-dd的格式输入输出。但是,我可以很灵活的进行改进,使得通用的日期格式能够得到正确处理。这一点已经在我尚未发布的2.1版以及2.1英文版里面解决了。由于我最近项目一直很忙,所以我只能抽空来进行发布(因为需要花时间做一下演示和下载页面)。到时候还需要csdn的各位朋友多提意见呢。
(new Date("2003/3/0")).getDate();//得到2003年2月份的天数
日期new Date("2003/3/35")也合法,有时候也有用(比如当前日期是25日,客户答应10天后付款),所以一般我也把它当作合法日期,把它纠正,同时提醒用户。http://jkisjk.vip.sina.com/code/html/forCheckDateInput.htm