原作者是Oliver Bryant, 我在Ta的基础上修改的,添加了前一年,后一年的选择,修改了事件响应,去掉了过去日期不可选择等。
入口方法是lcs()。返回值是YYYYMMDD。
function getObj(objID)
{
if (document.getElementById) {return document.getElementById(objID);}
else if (document.all) {return document.all[objID];}
else if (document.layers) {return document.layers[objID];}
}
function Left(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function Top(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
// Calendar script
var today = new Date();
var today_m=today.getMonth();//sccm
var today_y=today.getFullYear();//sccy
var cur_m=today.getMonth();//ccm
var cur_y=today.getFullYear();//ccy
var cur_d=today.getDate();
function splitDate(sdate) {
if(!sdate||sdate.length!=8){
return null;
}
curdtarr=new Array(curdt.substring(0,4),curdt.substring(4,6),curdt.substring(6));
for(var k=0;k<curdtarr.length;k++) {
//alert(curdtarr[k]);
if (isNaN(curdtarr[k])){
return null;
}
}
return curdtarr;
}
document.write('<table id="fc" style="position:absolute;border-collapse:collapse;background:#FFFFFF;border:1px solid #ABABAB;display:none" cellpadding=2>');
document.write('<tr>');
document.write('<td style="cursor:pointer" onclick="csuby()">');
document.write('<a title="last year">');
document.write('<img src="/TCDBWS/resource/ly.gif">');
document.write('</a>');
document.write('</td>');
document.write('<td style="cursor:pointer" onclick="csubm()">');
document.write('<a title="last month">');
document.write('<img src="/TCDBWS/resource/lm.gif">');
document.write('</a>');
document.write('</td>');
document.write('<td colspan=3 id="mns" align="center" style="font:bold 13px Arial">');
document.write('</td>');
document.write('<td align="right" style="cursor:pointer" onclick="caddm()">');
document.write('<a title="next month">');
document.write('<img src="/TCDBWS/resource/nm.gif">');
document.write('</a>');
document.write('</td>');
document.write('<td align="right" style="cursor:pointer" onclick="caddy()">');
document.write('<a title="next year">');
document.write('<img src="/TCDBWS/resource/ny.gif">');
document.write('</a>');
document.write('</td>');
document.write('</tr>');
document.write('<tr><td align=center style="background:#ABABAB;font:12px Arial">S</td><td align=center style="background:#ABABAB;font:12px Arial">M</td><td align=center style="background:#ABABAB;font:12px Arial">T</td><td align=center style="background:#ABABAB;font:12px Arial">W</td><td align=center style="background:#ABABAB;font:12px Arial">T</td><td align=center style="background:#ABABAB;font:12px Arial">F</td><td align=center style="background:#ABABAB;font:12px Arial">S</td></tr>');
for(var kk=1;kk<=6;kk++) {
document.write('<tr>');
for(var tt=1;tt<=7;tt++) {
num=7 * (kk-1) - (-tt);
document.write('<td id="v' + num + '" style="width:18px;height:18px"> </td>');
}
document.write('</tr>');
}
document.write('<tr>');
document.write('<td colspan=7 align="center" style="font:bold 13px Arial;cursor:pointer" onclick="closewin()">');
document.write('close');
document.write('</td>');
document.write('</tr>');
document.write('</table>');
var updobj;
function lcs(ielem) {
updobj=ielem;
getObj('fc').style.left=Left(ielem);
getObj('fc').style.top=Top(ielem)+ielem.offsetHeight;
getObj('fc').style.display='';
// First check date is valid
curdt=ielem.value;
//alert(curdt);
curdtarr=splitDate(curdt);
if (curdtarr) {
cur_m=curdtarr[1]-1;
cur_y=curdtarr[0];
cur_d=curdtarr[2];
} else {
cur_d='';
}
prepcalendar(cur_d,cur_m,cur_y);
}
function cs_over(i) {
var obj = new Object();
obj.i=i;
obj.cs_over=function (){
////alert(i);
getObj('v'+i).style.background='#FFCC66';
}
return obj;
}
function cs_out(i) {
var obj = new Object();
obj.i=i;
obj.cs_out=function (){
////alert(i);
getObj('v'+i).style.background='#C4D3EA';
}
return obj;
}
function cs_click(i) {
var obj = new Object();
obj.i=i;
obj.doclick=function (){
////alert(i);
updobj.value=calvalarr[i]
closewin();//getObj('fc').style.display='none';
}
return obj;
}
function closewin(){
getObj('fc').style.display='none';
}
var mnn=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var mnl=new Array(31,29,31,30,31,30,31,31,30,31,30,31);
var calvalarr=new Array(42);
function f_cps(obj) {
obj.style.background='#C4D3EA';
obj.style.font='10px Arial';
obj.style.color='#333333';
obj.style.textAlign='center';
obj.style.textDecoration='none';
obj.style.border='1px solid #6487AE';
obj.style.cursor='pointer';
}
function f_cpps(obj) {
obj.style.background='#C4D3EA';
obj.style.font='10px Arial';
obj.style.color='#ABABAB';
obj.style.textAlign='center';
obj.style.textDecoration='line-through';
obj.style.border='1px solid #6487AE';
obj.style.cursor='default';
}
function f_hds(obj) {
obj.style.background='#FFF799';
obj.style.font='bold 10px Arial';
obj.style.color='#333333';
obj.style.textAlign='center';
obj.style.border='1px solid #6487AE';
obj.style.cursor='pointer';
}
// day selected
function prepcalendar(hd,cm,cy) {
//alert(cy+"-"+cm+"-"+hd);
var sel_m_f_d=new Date();//selected month first day
sel_m_f_d.setDate(1);
sel_m_f_d.setFullYear(cy);
sel_m_f_d.setMonth(cm);
//alert(sel_m_f_d);
wd=sel_m_f_d.getDay();//weekday
//alert("wd is "+wd);
getObj('mns').innerHTML=cy + '- ' + (1+cm);
marr=((cy%4)==0)?mnl:mnn;
for(var i=1;i<=42;i++) {
f_cps(getObj('v'+i));
if ((i >= (wd +1)) && (i<=wd+marr[cm])) {
//dip=((i-wd < sd)&&(cm==today_m)&&(cy==sccy));
htd=((hd!='')&&(i-wd==hd));
//if (dip)
// f_cpps(getObj('v'+i));
//else
if (htd)
f_hds(getObj('v'+i));
else
f_cps(getObj('v'+i));
var ove=cs_over(i);
getObj('v'+i).onmouseover=ove.cs_over;
var out=cs_out(i);
getObj('v'+i).onmouseout=out.cs_out;
var cli=cs_click(i);
getObj('v'+i).onclick=cli.doclick;
getObj('v'+i).innerHTML=i-wd;
var tm='0'+(1+cm);
tm=tm.substring(tm.length-2);
var td='0'+(i-wd);
td=td.substring(td.length-2);
//返回值
calvalarr[i]=''+cy+tm+td;
} else {
getObj('v'+i).innerHTML=' ';
getObj('v'+i).onmouseover=null;
getObj('v'+i).onmouseout=null;
getObj('v'+i).style.cursor='default';
}
}
}
//prepcalendar('',ccm,ccy);
//getObj('fc'+cc).style.visibility='hidden';
function caddm() {
marr=((cur_y%4)==0)?mnl:mnn;
cur_m+=1;
if (cur_m>=12) {
cur_m=0;
cur_y++;
}
prepcalendar(cur_d,cur_m,cur_y);
}
function caddy() {
marr=((cur_y%4)==0)?mnl:mnn;
cur_y++;
prepcalendar(cur_d,cur_m,cur_y);
}
function csubm() {
marr=((cur_y%4)==0)?mnl:mnn;
cur_m-=1;
if (cur_m<0) {
cur_m=11;
cur_y--;
}
prepcalendar(cur_d,cur_m,cur_y);
}
function csuby() {
marr=((cur_y%4)==0)?mnl:mnn;
cur_y--;
prepcalendar(cur_d,cur_m,cur_y);
}
分享到:
相关推荐
日历,控件,兼容,ie6,7,8,firefox,safari
3. **跨浏览器兼容性**:由于不同的浏览器对某些CSS属性和JavaScript特性支持程度不同,开发者需要确保代码能在IE、Firefox以及其他现代浏览器(如Chrome、Safari和Edge)上正常工作。这通常需要使用像`feature ...
"JS火狐兼容日历控件"的描述意味着它提供了一个解决方案,不仅适用于基于Webkit内核的浏览器,如Chrome和Safari,还特别针对使用Gecko内核的Firefox进行了优化。下面我们将深入探讨JS日历控件的实现、设计考虑、兼容...
在 Windows 系统上,我们需要安装 iCloud 控制面板程序,然后启动 iCloud,使用 iPad 或 iPhone 上的 Apple ID 登陆 iCloud,这样就可以启用同步 IE、Firefox 或 Chrome 浏览器书签的功能了。 在设置过程中,我们...
"兼容FF-IE-Opera-Safari的日期选择控件" 提供了针对多种主流浏览器(Firefox, Internet Explorer, Opera, Safari)的解决方案,确保在不同平台和设备上的一致性体验。以下将详细讲解这两款控件及其相关知识点: 1....
7. **兼容性**:考虑到浏览器的多样性,编写JavaScript日历控件时需要关注跨浏览器的兼容性问题,确保在不同的浏览器(如Chrome、Firefox、Safari、Edge和IE)上都能正常工作。 在提供的文件名中,"calendar.html"...
这意味着组件应该能够在各种浏览器和设备上正常工作,包括老版本的IE浏览器、现代的Chrome、Firefox、Safari以及移动设备上的浏览器。 5. **文件列表分析** - `Setup.rar`:这是一个意外上传的文件,被360检测为...
Ext Calendar 是 ExtJS 的一个功能非常强大的日历显示组件,支持包括 IE、Firefox、Safari、Chrome 和 Opera 浏览器。 类结构图如下所示: 运行效果图如下: 标签:ExtCalendar
在兼容性方面,Mobiscroll表现出色,支持多种浏览器,包括Chrome、Firefox、Safari、Android内置浏览器以及IE9及以上版本,确保了在各种平台上的稳定运行。此外,它还兼容主流的移动操作系统,如iOS、Android和...
由于HTC是Internet Explorer的专属技术,因此这个日历控件只能在IE浏览器中正常工作,对于其他如Chrome、Firefox、Safari等非IE浏览器,可能需要使用其他的解决方案,如jQuery UI的Datepicker或者Bootstrap的...
【描述】提到的"javasript日历控件"是一款多浏览器兼容的解决方案,意味着它不仅能在常见的Chrome、Firefox、Safari、Edge等浏览器上正常工作,还可能包括对老旧浏览器如IE的兼容性优化。"多选"功能允许用户同时选择...
本文将深入探讨如何使用JavaScript(特别是jQuery库)来创建一个兼容各种浏览器的日历代码,包括IE、Opera、Safari、Firefox和Mozilla。 首先,JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页动态...
这个双日历控件充分利用了jQuery的这些优点,确保在所有主流浏览器(如Chrome、Firefox、Safari、Edge、IE等)上都能正常运行,避免了因浏览器兼容性问题导致的用户体验下降。 日历控件通常包含以下几个关键功能: ...
- **跨浏览器支持**:My97 DatePicker的核心目标就是提供一个能在所有主流浏览器中正常工作的日历组件,包括IE6及更高版本,Firefox,Chrome,Safari,Opera等。 - **丰富的自定义选项**:它提供了大量的配置参数...
在早期的Web开发中,由于浏览器之间的兼容性问题,尤其是IE与其他浏览器(如Firefox、Chrome、Safari)之间的差异,实现跨浏览器的JS功能是一项艰巨的任务。日历控件作为一项复杂的交互组件,其兼容性尤为重要。以下...
具体兼容ie6-ie10 、Google chrome、firefox、safari、opera 以及使用ie内核和谷歌chrome内核的浏览器(如360浏览器,世界之窗,百度浏览器,搜狗浏览器) Calendar.js文件首行的注释介绍了控件的用法 用浏览器打开...
5. **兼容性**:jQuery库的一个优点是它对浏览器的良好兼容性,所以由JQ实现的行程与日历源码也应能在主流浏览器上运行良好,包括Chrome、Firefox、Safari、Edge和旧版IE。 6. **响应式设计**:考虑到现代网页的多...
开发者需要进行广泛的兼容性测试,包括IE、Firefox、Chrome、Safari和Edge等。 总的来说,JavaScript日历控件是一个涉及前端多方面技术的综合实践。从基本的HTML/CSS/JavaScript语法,到高级的插件使用、性能优化和...
9. **兼容性**: 考虑到浏览器的兼容性问题,你需要确保选择的日历库能支持主流的浏览器,如Chrome、Firefox、Safari、Edge以及IE11及以上版本。 10. **版本管理和更新**: 使用npm或yarn等包管理工具可以帮助跟踪和...