JavaScript实现日期输入控件

最新推荐文章于 2016-06-20 13:12:00 发布

wall_ebs

最新推荐文章于 2016-06-20 13:12:00 发布

阅读量972

点赞数

分类专栏： javascript 文章标签： javascript 控件 date

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先创建一个输入文本框控件、一个图形按钮以及用来盛放日期输入控件的容器，该容器可以使用一个Div来实现，HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JavaScript实现日期输入控件</title>
</head>
<body>
	<div id="dataTextContainer">
		<input type="text" name="dataText" id="dataText">
		<button  onclick="javascript:displayCalendar();">
			<img src="<a target=_blank href="http://a.hiphotos.baidu.com/album/pic/item/7dd98d1001e939012b2ed77478ec54e736d1964f.jpg?psign=2b2ed77478ec54e736d12f2eb9389b504ec2d5628535b277">http://a.hiphotos.baidu.com/album/pic/item/7dd98d1001e939012b2ed77478ec54e736d1964f.jpg?psign=2b2ed77478ec54e736d12f2eb9389b504ec2d5628535b277</a>" >
		</button>
	</div>
	<div id="calendarContainer"></div>
</body>
</html>

css样式表如下

#dataTextContainer{
	border: 1px solid #A5ACB2;
	width: 100px;
	height: 19px;
	text-align: right;
	float: left;
}
#dataTextContainer input{
        display:block;
        float:left;
	border:none 0;
	width: 78px;
	height: 14px;
	font-size: 12px;
	text-align: left;
}
#dataTextContainer button{
	width: 22px;
	height: 19px;
	margin:0;
	padding:0;
	text-align: center;
}
#calendarContainer{
	width: 150px;
	height: 100px;
	z-index: 100000;
	font-size: 13px;
}

这里，输入文本框右侧的按钮其实是和输入文本框共同位于一个div元素内。div元素定义了边框，包含这两个控件，而输入文本框则定义不显示边框。这样看起来就像是按钮处于文本框内。

注意，应该为用于容纳日期输入框的控件的div元素样式设置z-index，这样使其位于其他元素上方。

实现的JS代码如下

// 单击输入文本框右侧按钮将触发这个函数
function displayCalendar(){
	drawCalendar();
}
// 单击日期控件底部的关闭按“钮将”触发这个函数
// 清空calendarContainer内容，关闭calendarContainer
function closeCalendar(){
	var oCalendarContainer=document.getElementById('calendarContainer');
	oCalendarContainer.innerHTML="";
}
// 下面的函数创建日期输入控件
function drawCalendar(sYear,sMonth){
	var newDate;
	// 初始打开的时间是系统当前日期，否则使用自定义的日期
	// 自定义的日期往往是日期输入控件上方的两个控件来控制的
	if (arguments[0]==null||arguments[1]==null) {
		newDate=new Date();
	}else{
		newDate=new Date(sYear,sMonth-1);
	}
	var date_year=newDate.getFullYear();
	var date_month=newDate.getMonth()+1;
	var date_today=newDate.getDate();
	var date_day=newDate.getDay();
	// 下面的几个变量用于给日期输入控件顶部的两个按钮提供事件参数
	// 如果当前是8月，那么向前翻就是9月，向后翻就是7月
	// 但是当前月是12月或者1月时就应该注意，因为这个时候会有年份的变化
	var nextMonth=date_month+1;
	var nextYear=date_year;
	var prevMonth=date_month-1;
	var prevYear=date_year;
	if (date_month==12) {nextMonth=1;nextYear=date_year+1;};
	if (date_month==1) {prevMonth=12;prevYear=date_year-1};
	// 声明表变量
	// 声明表变量
 	var calendarTable="";
	calendarTable += '<table width="150" border="0" cellpadding="0" cellspacing="1"'+
      		'style="background:#0066ff;text-align:center;">';
 	calendarTable += ' <tr style="background:#399;">';
 	// 向后翻月
 	calendarTable += '  <td onclick="javascript:drawCalendar('+prevYear+','+prevMonth+');"  style="cursor:pointer;background		:#f60;">&lt;&lt;</td>';
 	calendarTable += '  <td colspan="5">'+date_year+'年'+date_month+'月</td>';
 	// 向前翻月
 	calendarTable += '  <td onclick="javascript:drawCalendar('+nextYear+','+nextMonth+');"  style="cursor:pointer;background		:#f60;">&gt;&gt;</td>';
 	calendarTable += ' </tr>';
	 // 星期表头
 	calendarTable += ' <tr style="background:#69f;">';
	calendarTable += '  <td>日</td>';
 	calendarTable += '  <td>一</td>';
 	calendarTable += '  <td>二</td>';
	calendarTable += '  <td>三</td>';
 	calendarTable += '  <td>四</td>';
 	calendarTable += '  <td>五</td>';
 	calendarTable += '  <td>六</td>';
 	calendarTable += ' </tr>';	

	// 计算一个月内的天数，这里注意是否闰月
	var dayNum_in_month=[31,28,31,30,31,30,31,31,30,31,30,31];
	var isleapyear=false;
	if (date_year%4==0) {
		isleapyear=true;
		if (date_year%100==0) {
			isleapyear=(date_year%400==0)?true:false;
		}
	}
	if (isleapyear) {
		dayNum_in_month[1]=29;
	}

	var month_alldays=dayNum_in_month[date_month-1];
	// 计算行数
	var line_top,line_bot;
	line_top=Math.floor(date_today/7)+1;
	line_bot=Math.floor((month_alldays-date_today+date_day)/7);
	/*console.log(line_top);
	console.log(line_bot); */
	var line=line_top+line_bot;
	// 定义一个二位数组，我们预备是一个6x7数组，数组每个元素就对应一个单元格
	
	var dateList=[];
	for (var i = 0; i < line; i++) {
		dateList.push([""]);
	};

	var dateCell;
	for (var i = 0; i < line; i++) {
		// i就是行数
		calendarTable += '	';
		for(var j=0;j<7;j++){
			// j就是列数				
			// 如果日期值<=0,那么就将其置为空
			// 如果值大于当前月总天数，那么文本框不显示值
			if ((date_today-7*(line_top-i-1)+j-date_day)<=0||(date_today-7*(line_top-i-1)+j-date_day)>month_alldays) {
				dateList[i][j]=" ";
			}else{
				dateList[i][j]=date_today-7*(line_top-i-1)+j-date_day;
			}
			
			
			/*
			*如果单元格值不为空，那么就可以设置其可以触发事件，共有三个事件
			*（1）单击事件，将会把当前日期写入到文本框
			*（2）鼠标移动到单元格上面，会改变背景突出显示
			*（3）鼠标移除单元格，将会初始化背景色
			*/
			if(dateList[i][j]!=" "){
				dateCell='';
				// 当前日期的设置，包括改变文本的颜色以突出显示，同样包含3个事件
				if (i==(line_top-1)&&j==date_day) {
						dateCell='';
				}
			}else{
				dateCell ="";
			}

			calendarTable += dateCell ;
		}// 内层for循环结束
		calendarTable += '';
	} // 外层for循环结束

	// calendarContainer底部“关闭”按钮
	calendarTable += '';
	calendarTable += '<table width="150" style="background: rgb(0, 102, 255); text-align: center;" border="0" cellspacing="1" cellpadding="0"><tbody><tr style="background: rgb(51, 153, 153);"><td style="background: rgb(255, 102, 0); cursor: pointer;"><<</td><td colspan="5">'+date_year+'年'+date_month+'月</td><td style="background: rgb(255, 102, 0); cursor: pointer;">>></td></tr><tr style="background: rgb(102, 153, 255);"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr><tr><td style="cursor: pointer;">'+dateList[i][j]+'</td><td style="background: rgb(255, 102, 0); cursor: pointer;">'+dateList[i][j]+'</td><td> </td></tr><tr><td style="background: rgb(51, 153, 153); cursor: pointer;" colspan="7">'+
					 '关闭</td></tr></tbody></table>';
	/*
	*将日期控件写入calendarContainer
	*/
	var oCalendarContainer=document.getElementById('calendarContainer');
	oCalendarContainer.innerHTML = calendarTable;
}

// 当鼠标指针到这个日期上时触发这个函数设置背景
function setFocus(obj){
	obj.style.backgroundColor="#f60";
}
// 当鼠标移开时触发这个函数还原背景
function setFocusOut(obj){
	obj.style.backgroundColor="";
}
// 当鼠标单击日期是触发这个函数，为日期文本框赋值
function setDateText(sYear,sMonth,sDate){
	var oDateText=document.getElementById('dateText');
	oDateText.value=sYear+"-"+sMonth+"-"+sDate;
}

wall_ebs

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript实现日期输入控件

首先创建一个输入文本框控件、一个图形按钮以及用来盛放日期输入控件的容器，该容器可以使用一个Div来实现，HTML代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;JavaScript实现日期输入控件...
复制链接

扫一扫