<HEAD>
<title>联动案设置</title>
<script src="Calendar.js" type="text/javascript"></script>
<
script
language
="javascript"
src
="Calendar.js"
></
script
>
</HEAD>
调用方法
<
TD
style
="HEIGHT:25px"
><
FONT
face
="宋体"
>
开业时间：
<
asp:textbox
id
="dtOpenTime"
runat
="server"
Width
="133px"
visible
="True"
></
asp:textbox
><
INPUT
class
="but"
id
="btndtOpenTimeDate"
style
="WIDTH:25px;CURSOR:hand;HEIGHT:24px"
onclick
="javascript:Cal_dropdown(dtOpenTime)"
type
="button"
value
="..."
name
="btndtOpenTimeDate"
></
FONT
></
TD
>
脚本文件 Calendar.js
/**/
/*
------------------------------------------------------------------------
日期控件
functionCal_dropdown(edit,min,max)
弹出日历，可不给参数min和max，参数edit必须有
functionCal_datevalid(edit,min,max)
检查edit中值是否为大于等于min，小于等于max的有效日期格式字符串。
是则返回true，否则返回false
可不给参数min和max(字符串格式)
参数edit必须有，如果edit无，则必须是：edit为edit和img的父亲(如span、div)的第一个元素
*/
var
Cal_popup
=
window.createPopup();
var
Cal_edit;
var
Cal_editdate
=
new
Date();
var
Cal_maxdate;
var
Cal_mindate;
function
Cal_clearTime(thedate)
...
{
thedate.setHours(
0
);
thedate.setMinutes(
0
);
thedate.setSeconds(
0
);
thedate.setMilliseconds(
0
);
}
var
Cal_today
=
new
Date();
Cal_clearTime(Cal_today);
//
检查日期//
//
editctrl：日期控件输入框
//
false:日期错误
function
ChkCZDate(editctrl)
...
{
if
(editctrl.value
==
''
)
...
{alert(
'
请输入日期！
'
)
editctrl.select();
editctrl.focus();
return
false
;}
if
(
!
Cal_datevalid(editctrl,
'
1910-1-1
'
,
'
3000-1-1
'
))
...
{
alert(
'
日期格式不正确,日期有效范围为1910年到3000年
'
);
editctrl.focus();
return
false
;
}
else
return
true
;
}
function
Cal_decDay(thedate,days)
...
{
if
(
!
days)days
=
1
;
thedate.setTime(thedate
-
days
*
24
*
60
*
60
*
1000
);
}
function
Cal_incMonth(year,month)
...
{
if
(month
==
11
)
...
{
month
=
0
;
year
++
;
}
else
month
++
;
Cal_writeHTML(year,month);
}
function
Cal_decMonth(year,month)
...
{
if
(month
==
0
)
...
{
month
=
11
;
year
--
;
}
else
month
--
;
Cal_writeHTML(year,month);
}
function
Cal_decYear(year,month)
...
{
Cal_writeHTML(year
-
1
,month);
}
function
Cal_incYear(year,month)
...
{
Cal_writeHTML(year
+
1
,month);
}
function
Cal_writeHTML(theyear,themonth)
...
{
var
html
=
'
<divid="Cal_div1"style="width:231px;FONT-SIZE:9pt;background-color:#fffef5;border:black1pxsolid">
'
+
'
<TABLEstyle="border-bottom:black1pxsolid;FONT-SIZE:9pt;background-color:#0fa8c7;color:white;
'
+
'
padding-top:2px;font-weight:bold;text-align:center"
'
+
'
cellSpacing="0"cellPadding="0"width="100%"border="0">
'
+
'
<TR><TDstyle="cursor:hand"align="left"width=24onmouseover="this.style.background=
'
+
"
'#ffb468';
"
+
'
"
'
+
'
onmouseout="this.style.background=
'
+
"
'#0fa8c7';
"
+
'
"
'
+
'
onclick="parent.Cal_decYear(
'
+
theyear
+
'
,
'
+
themonth
+
'
);"
'
+
'
><年</TD>
'
+
'
<TDstyle="cursor:hand"align="left"width=24onmouseover="this.style.background=
'
+
"
'#ffb468';
"
+
'
"
'
+
'
onmouseout="this.style.background=
'
+
"
'#0fa8c7';
"
+
'
"
'
+
'
onclick="parent.Cal_decMonth(
'
+
theyear
+
'
,
'
+
themonth
+
'
);"
'
+
'
><月</TD>
'
+
'
<TDalign="center">
'
;
html
+=
theyear
+
'
年
'
+
(themonth
+
1
)
+
'
月</TD>
'
+
'
<TDstyle="cursor:hand"align="right"width=24onmouseover="this.style.background=
'
+
"
'#ffb468';
"
+
'
"
'
+
'
onmouseout="this.style.background=
'
+
"
'#0fa8c7';
"
+
'
"
'
+
'
onclick="parent.Cal_incMonth(
'
+
theyear
+
'
,
'
+
themonth
+
'
);"
'
+
'
>月></TD>
'
+
'
<TDstyle="cursor:hand"align="right"width=24onmouseover="this.style.background=
'
+
"
'#ffb468';
"
+
'
"
'
+
'
onmouseout="this.style.background=
'
+
"
'#0fa8c7';
"
+
'
"
'
+
'
onclick="parent.Cal_incYear(
'
+
theyear
+
'
,
'
+
themonth
+
'
);"
'
+
'
>年></TD>
'
;
html
+=
'
</TR></TABLE>
'
+
'
<TABLEstyle="FONT-SIZE:9pt;font-weight:bold;text-align:center;border-bottom:black1pxsolid"
'
+
'
cellSpacing="2"cellPadding="0"width="100%"border="0">
'
+
'
<TR><TD>日</TD><TD>一</TD><TD>二</TD><TD>三</TD><TD>四</TD><TD>五</TD><TD>六</TD>
'
+
'
</TR></table>
'
+
'
<TABLEstyle="FONT-SIZE:9pt;text-align:center;cursor:hand"cellSpacing="2"
'
+
'
cellPadding="0"width="100%"border="0">
'
;
var
day1
=
new
Date(theyear,themonth,
1
);
if
(day1.getDay()
!=
0
)
Cal_decDay(day1,day1.getDay());
//
日历开始日
for
(
var
i
=
1
;i
<=
6
;i
++
)
...
{
html
+=
'
<TR>
'
;
for
(
var
j
=
1
;j
<=
7
;j
++
)
...
{
html
+=
'
<TD
'
;
if
(day1.getTime()
==
Cal_today.getTime())
html
+=
'
style="color:blue"
'
;
else
if
(day1.getTime()
==
Cal_editdate.getTime())
html
+=
'
style="color:red"
'
;
else
if
(day1.getMonth()
!=
themonth)
html
+=
'
style="color:#aaaaaa"
'
;
html
+=
'
onmouseover="this.style.background=
'
+
"
'#ffb468';
"
+
'
"
'
+
'
onmouseout="this.style.background=
'
+
"
'#fffef5';
"
+
'
"
'
;
html
+=
'
onclick="parent.Cal_clickday(
'
+
day1.getTime()
+
'
);"
'
;
html
+=
'
>
'
+
day1.getDate()
+
'
</TD>
'
;
Cal_decDay(day1,
-
1
);
}
html
+=
'
</TR>
'
;
if
(day1.getMonth()
!=
themonth)
break
;
}
html
+=
'
</TABLE>
'
+
'
<divstyle="border-top:black1pxsolid;text-align:center;padding:2px">今天是
'
+
'
<spanstyle="color:blue;cursor:hand;text-decoration:underline"onclick="javascript:parent.Cal_clickday(
'
+
Cal_today.getTime()
+
'
);">
'
+
Cal_today.getFullYear()
+
'
-
'
+
(Cal_today.getMonth()
+
1
)
+
'
-
'
+
Cal_today.getDate()
+
'
</span></div>
'
+
'
</div>
'
;
Cal_popup.document.body.innerHTML
=
html;
if
(Cal_popup.isOpen)
//
重新调整显示高度
Cal_popup.show(
0
,Cal_edit.offsetHeight,
231
,Cal_popup.document.all(
"
Cal_div1
"
).offsetHeight,Cal_edit);
}
//
字符串转换为日期
function
Cal_strtodate(str)
...
{
var
date
=
Date.parse(str);
if
(isNaN(date))
...
{
date
=
Date.parse(str.replace(
/-/
g,
"
/
"
));
//
识别日期格式：YYYY-MM-DD
if
(isNaN(date))date
=
0
;
}
return
(date);
}
//
返回日期间相差的天数
function
Cal_DateDiff(Date1,Date2)
...
{
return
(Date2
-
Date1)
/
(
24
*
60
*
60
*
1000
);
}
//
返回日期间相差的月数(最大误差小于一个月)
function
Cal_MonthDiff(DateA,DateB)
...
{
Date1
=
new
Date();
Date2
=
new
Date();
Date1.setTime(DateA);
Date2.setTime(DateB);
months
=
(Date2.getFullYear()
-
Date1.getFullYear())
*
12
;
addmonths
=
Date2.getMonth()
-
Date1.getMonth();
months
=
months
+
addmonths;
if
(Date2.getDate()
<
Date1.getDate())
months
--
;
return
months;
}
//
弹出日历，可不给参数min和max，参数edit必须有
function
Cal_dropdown(edit,min,max)
...
{
if
(
!
edit)
...
{
edit
=
window.event.srcElement.parentElement.children(
0
);
if
((
!
edit.type)
||
(edit.type.toLowerCase()
!=
"
text
"
))
return
;
}
Cal_edit
=
edit;
var
date
=
Cal_strtodate(edit.value);
if
(date
==
0
)date
=
Cal_today.getTime();
if
(max)Cal_maxdate
=
Cal_strtodate(max);
else
Cal_maxdate
=
0
;
if
(min)Cal_mindate
=
Cal_strtodate(min);
else
Cal_mindate
=
0
;
Cal_editdate.setTime(date);
Cal_writeHTML(Cal_editdate.getFullYear(),Cal_editdate.getMonth());
Cal_popup.show(
0
,edit.offsetHeight,
231
,
149
,edit);
Cal_popup.show(
0
,edit.offsetHeight,
231
,Cal_popup.document.all(
"
Cal_div1
"
).offsetHeight,edit);
}
//
点击日期
function
Cal_clickday(day,edit)
...
{
if
(Cal_maxdate
!=
0
)day
=
Math.min(day,Cal_maxdate);
day
=
Math.max(day,Cal_mindate);
Cal_editdate.setTime(day);
var
im;
var
id;
if
((Cal_editdate.getMonth()
+
1
)
<
10
)
...
{
im
=
Cal_editdate.getMonth()
+
1
;
im
=
'
0
'
+
im;
}
else
im
=
Cal_editdate.getMonth()
+
1
;
if
((Cal_editdate.getDate())
<
10
)
id
=
"
0
"
+
Cal_editdate.getDate();
else
id
=
Cal_editdate.getDate();
Cal_edit.value
=
Cal_editdate.getFullYear()
+
"
-
"
+
im
+
"
-
"
+
id;
Cal_popup.hide();
Cal_edit.fireEvent(
"
onkeydown
"
);
Cal_edit.focus();
}
function
Cal_datevalid(edit,min,max)
...
{
//
检查edit中值是否为大于等于min，小于等于max的有效日期格式字符串。
var
date
=
Cal_strtodate(edit.value);
if
(date
==
0
)
return
false
;
if
(max)
...
{
var
max
=
Cal_strtodate(max);
if
((max
!=
0
)
&&
(date
>
max))
return
false
;
}
if
(min)
...
{
var
min
=
Cal_strtodate(min);
if
((min
!=
0
)
&&
(date
<
min))
return
false
;
}
date
=
new
Date(date);
edit.value
=
date.getFullYear()
+
"
-
"
+
(date.getMonth()
+
1
)
+
"
-
"
+
date.getDate();
return
true
;
}
分享到：
相关推荐
基于javascript脚本的网页日历控件，格式为2013-01-01
功能很齐全的js日历控件,适用于 IE （5.0以上）浏览器
支持IE、Fixfox、Safia、Opera内核的浏览器的js脚本日历控件 使用介绍见个人博客 欢迎访问http://121.18.78.216
一个js脚本的日历控件,js大小不到20k左右(非Jquery), 兼容所有主流浏览器,内有非常详细的文档说明和demo案例,欢迎大家下载
js 日历控件，简单实用，项目中正在应用的，非常之好
介绍：这是WalkingPoison根据梅花雨的日历控件修改发展出来的一个日历 Javascript 页面脚本控件，适用于微软的 IE （5.0以上）浏览器，从2.59版本开始支持Firefox浏览器。由于梅花雨本人发布了自己新的日历控件，...
1.介绍：这是WalkingPoison根据梅花雨的日历控件修改发展出来的一个日历 Javascript 页面脚本控件，适用于微软的 IE （5.0以上）浏览器，从2.59版本开始支持Firefox浏览器。 2.用法 （1）把文件添加到解决方案文件夹...
日历控件 日期选择控件,js脚本 默认当前日期 还有出生日期版: http://download.csdn.net/detail/cxw640560/4240124 欢迎下载!
日历控件 纯Javascript脚本
实现日历控件的脚本文件，调用ShowCalendar(InId),InId表示文本框的ID,就可实现漂亮的日历控件啦。
通过js做的一个js的日历效果，效果不错，挺实用
自己系统用的日历，非常好用，包含润年润月星期。想下载资源，无资源分才上传。 html头部引用本文件。在文本框(input type=text)后，直接使用SelDate()就可弹出日历窗口，选择后自动填写在前文本框中。
点击出现日历控件 不会出现脚本错误，各种浏览器都兼容
birt 日历控件已经实现 。 1、首先需要引入一个Calendar.js脚本，将此脚本放置于WebRoot>webcontent>birt>ajax>utility下 2、先在FramesetFragment.jsp中对梅花雨控件进行引用. ...
多语言支持和自定义皮肤支持 通过lang属性,可以为每个日期控件单独配置语言,当然也可以通过WdatePicker.js配置全局的语言,皮肤也是一样,只要配置skin属性即可.这样一个页面中可以显示多种语言,多种皮肤的日期控件,更...
内容索引:脚本资源,Ajax/JavaScript,日历控件,日历,日期选择器 YCalendar - 风格漂亮的JS日历控件，本控件是在《Javascript设计模式》一书中第十三章《享元模式》的Web日历代码的基础上修改扩展出来的。基本实现了...
自定义日历控件，封装了JS脚本，源码加控件
Blog上面适合使用的JS日历控件，这个小插件可方便的在网页上显示日历，可放在你博客首页的侧边栏上，用来索引当月、当日的更新情况。
js实现漂亮的日历，采用javascript脚本语言，实现了漂亮的日历控件
摘要:脚本资源,Ajax/JavaScript,日历控件,日期选择器 Js双日历控件，在一个网页上同时显示两个日期选择器，写成了封装类，方便使用者调用。同时美化的相当不错。 包括了以下函数： 1、2012——2020年节假日信息...