<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
;
}
分享到：
相关推荐
HTML 和 JavaScript 脚本日历控件是网页开发中常用的一种交互元素，它允许用户在网页上方便地选择日期，通常与表单控件配合使用，提高用户体验。这种控件在网页应用、在线预订系统、事件管理或任何需要用户输入日期...
JavaScript脚本日历控件是一种常见的前端交互元素，主要用于网页上的日期选择，为用户提供直观、易用的日历界面。在IE5.0及以上版本的浏览器中，这种控件可以正常运行，提供良好的兼容性，满足大部分网站的需求。...
支持IE、Fixfox、Safia、Opera内核的浏览器的js脚本日历控件 使用介绍见个人博客 欢迎访问http://121.18.78.216
JavaScript（简称JS）是一种广泛用于客户端Web开发的脚本语言，它在网页中常用于处理用户的交互，增强网页的动态性。"日历控件"是JavaScript应用中的常见组件，主要用于用户选择日期，常见于事件安排、预约系统或...
"史上最强js日历控件"可能是指一个功能强大、灵活性高、且用户体验优良的JavaScript实现的日历组件。JavaScript，作为网页开发中的主要脚本语言，常常被用来增强网页的交互性和动态性，而日历控件就是这种增强的一...
在IT领域，JavaScript（简称js）是一种广泛应用于网页和网络应用开发的脚本语言，它在客户端运行，为用户提供动态、交互式的用户体验。日历控件是JavaScript常见的一种功能组件，用于显示日期并允许用户方便地选择...
"meiziDate.js"作为一款日历控件，很可能包含了以上所述的功能和特性。其简单实用的特点可能意味着它易于集成，功能齐全，同时不会给页面带来过大的负担。在实际使用中，开发者可以通过阅读其源代码，学习其设计思路...
JS日历控件是利用JavaScript编程语言实现的此类功能，它能够提供直观、友好的用户体验。本文将深入探讨JS日历控件的原理、实现方式以及相关知识点。 一、日历控件的基本概念 日历控件是一种用户界面组件，它以日历...
JavaScript日历控件是网页开发中常用的一种交互元素，它能帮助用户方便地选择日期，常见于表单输入、事件安排或时间相关的功能。在给定的资源中，包含了六种不同样式的JavaScript日历，这些日历可能具有不同的设计...
综上所述，“js日历控件集合”涵盖了各种JavaScript实现的日历组件，每种都有其独特特性和应用场景。根据项目需求，选择合适且易于维护的控件至关重要。在实际开发中，应充分理解这些控件的工作原理和配置选项，以便...
JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页交互和动态效果的实现。在本案例中，我们讨论的是一个“js简易的日历控件”，它旨在提供类似于QQ邮箱中简洁版日历的功能，适合作为网页左下角或后台管理页面...
《全面解析：一款高效兼容的JS日历控件》 在网页开发中，日历控件是不可或缺的一部分，尤其在处理日期输入、事件安排或时间管理等场景中。今天我们将深入探讨一个轻量级且兼容性极佳的JS日历控件，这款控件大小不到...
【JS版日历控件】是一种适用于.Net和Java平台的前端组件，主要使用JavaScript语言编写，使得开发者可以方便地在网页上添加具有交互性的日期选择功能。JavaScript，简称JS，是一种广泛应用于客户端Web开发的脚本语言...
在本案例中，`Calender_v_1_3.js`文件就是包含JS日历控件实现的脚本。 **2. DIV元素** 在HTML中，`<div>`元素是一个块级元素，可以用于组合其他HTML元素，设置样式，或者作为相对定位的容器。在这个日历控件中，`...
这个名为"日历控件常用注册表单"的资源包含了一个完整的注册表单，该表单集成了JavaScript（js）编写的日历功能。在网页设计中，这种交互式的日历控件常用于预订系统、事件安排或者任何需要用户输入特定日期的场景。...
这个压缩包“js ie firefox 日历控件多多”显然包含了一系列适用于Internet Explorer（IE）、Firefox等浏览器的JavaScript日历插件或者库。下面我们将深入探讨JavaScript日历控件的相关知识点，并结合不同浏览器的...
"js日历控件-calendar.js" 是一个JavaScript实现的日历组件，主要应用于网页中，用于显示日期选择功能。这个控件通常包含一个可交互的日历界面，用户可以通过它来选择日期，常见于在线表单、事件预订或者日期相关的...
JavaScript是一种常用的客户端脚本语言，它可以动态地修改网页内容，因此非常适合创建交互式的日历控件。实现JS日历控件通常包括以下几个步骤： 1. 创建HTML结构：首先，在HTML页面中创建一个按钮或输入框，作为...
本文将深入探讨如何使用JavaScript实现一个日历控件，该控件能够帮助用户方便地选择年、月、日，从而增强网页的时间操作功能。 首先，创建一个日历控件的核心在于理解JavaScript中的日期对象（Date）。`Date`对象是...
首先，日历控件通常是由JavaScript实现的前端部分和JSP后端处理逻辑组成。"TestDate"文件夹很可能包含了用于生成日历显示的JavaScript文件，这些文件可能以.js为扩展名，例如"calendar.js"或"datePicker.js"。...