本文源出处: http://wf5360308.cnblogs.com/articles/362935.html对显示风格进行了一些修改.
1  /**//**
2 *本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。
3 *tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。
4 *使用方法：
5 * (1)只选择日期 <input type="text" name="date" readOnly onClick="setDay(this);">
6 * (2)选择日期和小时 <input type="text" name="dateh" readOnly onClick="setDayH(this);">
7 * (3)选择日期和小时及分钟 <input type="text" name="datehm" readOnly onClick="setDayHM(this);">
8 *设置参数的方法
9 * (1)设置日期分隔符 setDateSplit(strSplit);默认为"-"
10 * (2)设置日期与时间之间的分隔符 setDateTimeSplit(strSplit);默认为" "
11 * (3)设置时间分隔符 setTimeSplit(strSplit);默认为":"
12 * (4)设置(1),(2),(3)中的分隔符 setSplit(strDateSplit,strDateTimeSplit,strTimeSplit);
13 * (5)设置开始和结束年份 setYearPeriod(intDateBeg,intDateEnd)
14 *说明：
15 * 默认返回的日期时间格式如同：2005-02-02 08:08
16 */
17 //------------------ 样式定义 ---------------------------//
18//功能按钮同样样式
19var s_tiannet_turn_base = "height:16px;font-size:9pt;color:white;border:0 solid #CCCCCC;cursor:hand;background-color:#2650A6;";
20//翻年、月等的按钮
21var s_tiannet_turn = s_tiannet_turn_base;//原来的是: "width:28px;" + s_tiannet_turn_base;
22//关闭、清空等按钮样式
23var s_tiannet_turn2 = "width:22px;" + s_tiannet_turn_base;
24//年选择下拉框
25var s_tiannet_select = "width:64px;display:none;";
26//月、时、分选择下拉框
27var s_tiannet_select2 = "width:46px;display:none;";
28//日期选择控件体的样式
29var s_tiannet_body = "width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;" +
30 "border-left:1 solid #CCCCCC;border-top:1 solid #CCCCCC;border-right:1 solid #999999;border-bottom:1 solid #999999;";
31//显示日的td的样式
32var s_tiannet_day = "width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;";
33//字体样式
34var s_tiannet_font = "color:#FFCC00;font-size:9pt;cursor:hand;";
35//链接的样式
36var s_tiannet_link = "text-decoration:none;font-size:9pt;color:#2650A6;";
37//横线
38var s_tiannet_line = "border-bottom:1 solid #6699CC";
39//------------------ 变量定义 ---------------------------//
40var tiannetYearSt = 1950;//可选择的开始年份
41var tiannetYearEnd = 2010;//可选择的结束年份
42var tiannetDateNow = new Date();
43var tiannetYear = tiannetDateNow.getFullYear(); //定义年的变量的初始值
44var tiannetMonth = tiannetDateNow.getMonth()+1; //定义月的变量的初始值
45var tiannetDay = tiannetDateNow.getDate();
46var tiannetHour = 8;//tiannetDateNow.getHours();
47var tiannetMinute = 0;//tiannetDateNow.getMinutes();
48var tiannetArrDay=new Array(42); //定义写日期的数组
49var tiannetDateSplit = "-"; //日期的分隔符号
50var tiannetDateTimeSplit = " "; //日期与时间之间的分隔符
51var tiannetTimeSplit = ":"; //时间的分隔符号
52var tiannetOutObject; //接收日期时间的对象
53var arrTiannetHide = new Array();//被强制隐藏的标签
54var m_bolShowHour = false;//是否显示小时
55var m_bolShowMinute = false;//是否显示分钟
56
57var m_aMonHead = new Array(12); //定义阳历中每个月的最大天数
58 m_aMonHead[0] = 31; m_aMonHead[1] = 28; m_aMonHead[2] = 31; m_aMonHead[3] = 30; m_aMonHead[4] = 31; m_aMonHead[5] = 30;
59 m_aMonHead[6] = 31; m_aMonHead[7] = 31; m_aMonHead[8] = 30; m_aMonHead[9] = 31; m_aMonHead[10] = 30; m_aMonHead[11] = 31;
60// ---------------------- 用户可调用的函数 -----------------------------//
61//用户主调函数－只选择日期
62function setDay(obj) {
63 tiannetOutObject = obj;
64 //如果标签中有值，则将日期初始化为当前值
65 var strValue = tiannetTrim(tiannetOutObject.value);
66  if( strValue != "" ){
67 tiannetInitDate(strValue);
68 }
69 tiannetPopCalendar();
70}
71//用户主调函数－选择日期和小时
72function setDayH(obj){
73 tiannetOutObject = obj;
74 m_bolShowHour = true;
75 //如果标签中有值，则将日期和小时初始化为当前值
76 var strValue = tiannetTrim(tiannetOutObject.value);
77 if( strValue != "" ){
78 tiannetInitDate(strValue.substring(0,10));
79 var hour = strValue.substring(11,13);
80 if( hour < 10 ) tiannetHour = hour.substring(1,2);
81 }
82 tiannetPopCalendar();
83}
84//用户主调函数－选择日期和小时及分钟
85function setDayHM(obj){
86 tiannetOutObject = obj;
87 m_bolShowHour = true;
88 m_bolShowMinute = true;
89 //如果标签中有值，则将日期和小时及分钟初始化为当前值
90 var strValue = tiannetTrim(tiannetOutObject.value);
91 if( strValue != "" ){
92 tiannetInitDate(strValue.substring(0,10));
93 var time = strValue.substring(11,16);
94 var arr = time.split(tiannetTimeSplit);
95 tiannetHour = arr[0];
96 tiannetMinute = arr[1];
97 if( tiannetHour < 10 ) tiannetHour = tiannetHour.substring(1,2);
98 if( tiannetMinute < 10 ) tiannetMinute = tiannetMinute.substring(1,2);
99 }
100 tiannetPopCalendar();
101}
102//设置开始日期和结束日期
103function setYearPeriod(intDateBeg,intDateEnd){
104 tiannetYearSt = intDateBeg;
105 tiannetYearEnd = intDateEnd;
106}
107//设置日期分隔符。默认为"-"
108function setDateSplit(strDateSplit){
109 tiannetDateSplit = strDateSplit;
110}
111//设置日期与时间之间的分隔符。默认为" "
112function setDateTimeSplit(strDateTimeSplit){
113 tiannetDateTimeSplit = strDateTimeSplit;
114}
115//设置时间分隔符。默认为":"
116function setTimeSplit(strTimeSplit){
117 tiannetTimeSplit = strTimeSplit;
118}
119//设置分隔符
120function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){
121 tiannetDateSplit(strDateSplit);
122 tiannetDateTimeSplit(strDateTimeSplit);
123 tiannetTimeSplit(strTimeSplit);
124}
125//设置默认的日期。格式为：YYYY-MM-DD
126function setDefaultDate(strDate){
127 tiannetYear = strDate.substring(0,4);
128 tiannetMonth = strDate.substring(5,7);
129 tiannetDay = strDate.substring(8,10);
130}
131//设置默认的时间。格式为：HH24:MI
132function setDefaultTime(strTime){
133 tiannetHour = strTime.substring(0,2);
134 tiannetMinute = strTime.substring(3,5);
135}
136// ---------------------- end 用户可调用的函数 -----------------------------//
137//------------------ begin 页面显示部分 ---------------------------//
138var weekName = new Array("日","一","二","三","四","五","六");
139document.write('<div id="divTiannetDate" style="'+s_tiannet_body+'" style="本日历选择控件由tiannet根据前人经验完善而成！">');
140document.write('<div align="center" id="divTiannetDateText" Author="tiannet" style="padding-top:2px;">');
141document.write('<span id="tiannetYearHead" Author="tiannet" style="'+s_tiannet_font+'" '+
142 'onclick="spanYearCEvent();"> 年</span>');
143document.write('<select id="selTianYear" style="'+s_tiannet_select+'" Author="tiannet" '+
144 ' onChange="tiannetYear=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetYearHead.style.display=\'\';'+
145 'this.style.display=\'none\';">');
146for(var i=tiannetYearSt;i <= tiannetYearEnd;i ++){
147 document.writeln('<option value="' + i + '">' + i + '年</option>');
148}
149document.write('</select>');
150document.write('<span id="tiannetMonthHead" Author="tiannet" style="'+s_tiannet_font+'" '+
151 'onclick="spanMonthCEvent();"> 月</span>');
152document.write('<select id="selTianMonth" style="'+s_tiannet_select2+'" Author="tiannet" '+
153 'onChange="tiannetMonth=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetMonthHead.style.display=\'\';'+
154 'this.style.display=\'none\';">');
155for(var i=1;i <= 12;i ++){
156 document.writeln('<option value="' + i + '">' + i + '月</option>');
157}
158document.write('</select>');
159//document.write('</div>');
160//document.write('<div align="center" id="divTiannetTimeText" Author="tiannet">');
161document.write('<span id="tiannetHourHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+
162 'onclick="spanHourCEvent();"> 时</span>');
163document.write('<select id="selTianHour" style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+
164 ' onChange="tiannetHour=this.value;tiannetWriteHead();document.all.tiannetHourHead.style.display=\'\';' +
165 'this.style.display=\'none\';">');
166for(var i=0;i <= 23;i ++){
167 document.writeln('<option value="' + i + '">' + i + '时</option>');
168}
169document.write('</select>');
170document.write('<span id="tiannetMinuteHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+
171 'onclick="spanMinuteCEvent();"> 分</span>');
172document.write('<select id="selTianMinute" style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+
173 ' onChange="tiannetMinute=this.value;tiannetWriteHead();document.all.tiannetMinuteHead.style.display=\'\';'+
174 'this.style.display=\'none\';">');
175for(var i=0;i <= 59;i ++){
176 document.writeln('<option value="' + i + '">' + i + '分</option>');
177}
178document.write('</select>');
179document.write('</div>');
180//输出一条横线
181document.write('<div style="'+s_tiannet_line+'"></div>');
182document.write('<div align="center" id="divTiannetTurn" style="border:0;" Author="tiannet">');
183document.write('<input type="button" style="'+s_tiannet_turn+'" value="▲" title="上一年" onClick="tiannetPrevYear();">');//◄►▲▼
184document.write('<font style="'+s_tiannet_turn+'">年</font>');
185document.write('<input type="button" style="'+s_tiannet_turn+'" value="▼" title="下一年" onClick="tiannetNextYear();"> ');
186document.write('<input type="button" style="'+s_tiannet_turn+'" value="▲" title="上一月" onClick="tiannetPrevMonth();">');
187document.write('<font style="'+s_tiannet_turn+'">月</font>');
188document.write('<input type="button" style="'+s_tiannet_turn+'" value="▼" title="下一月" onClick="tiannetNextMonth();">');
189
190document.write('</div>');
191//输出一条横线
192document.write('<div style="'+s_tiannet_line+'"></div>');
193document.write('<table border=0 cellspacing=0 cellpadding=0 bgcolor=white onselectstart="return false">');
194document.write(' <tr style="background-color:#2650A6;font-size:10pt;color:white;height:22px;" Author="tiannet">');
195for(var i =0;i < weekName.length;i ++){
196 //输出星期
197 document.write('<td width="21" align="center" Author="tiannet">' + weekName[i] + '</td>');
198}
199document.write(' </tr>');
200document.write('</table>');
201//输出天的选择
202document.write('<table border=0 cellspacing=1 cellpadding=0 bgcolor=white onselectstart="return false">');
203var n = 0;
204for (var i=0;i<5;i++) {
205 document.write (' <tr align=center id="trTiannetDay' + i + '" >');
206 for (var j=0;j<7;j++){
207 document.write('<td align="center" id="tdTiannetDay' + n + '" '+
208 'onClick="tiannetDay=this.innerText;tiannetSetValue(true);" '
209 +' style="' + s_tiannet_day + '"> </td>');
210 n ++;
211 }
212 document.write (' </tr>');
213}
214document.write (' <tr align=center id="trTiannetDay5" >');
215document.write('<td align="center" id=" |