首先创建一个输入文本框控件、一个图形按钮以及用来盛放日期输入控件的容器,该容器可以使用一个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;"><<</td>';
calendarTable += ' <td colspan="5">'+date_year+'年'+date_month+'月</td>';
// 向前翻月
calendarTable += ' <td onclick="javascript:drawCalendar('+nextYear+','+nextMonth+');" style="cursor:pointer;background :#f60;">>></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;
}