`

日历 (IE,FireFox,Safari)

    博客分类:
  • web
阅读更多
原作者是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">&nbsp;</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='&nbsp;';
			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);
}


  • me.zip (6.9 KB)
  • 下载次数: 8
分享到:
评论

相关推荐

    日历控件,兼容ie6,7,8,firefox,safari

    日历,控件,兼容,ie6,7,8,firefox,safari

    js+css精美日历支持ie和firefox等浏览器

    3. **跨浏览器兼容性**:由于不同的浏览器对某些CSS属性和JavaScript特性支持程度不同,开发者需要确保代码能在IE、Firefox以及其他现代浏览器(如Chrome、Safari和Edge)上正常工作。这通常需要使用像`feature ...

    JS火狐兼容日历控件

    "JS火狐兼容日历控件"的描述意味着它提供了一个解决方案,不仅适用于基于Webkit内核的浏览器,如Chrome和Safari,还特别针对使用Gecko内核的Firefox进行了优化。下面我们将深入探讨JS日历控件的实现、设计考虑、兼容...

    如何将IE收藏夹同步到iPad和iPhone的Safari的书签里-.docx

    在 Windows 系统上,我们需要安装 iCloud 控制面板程序,然后启动 iCloud,使用 iPad 或 iPhone 上的 Apple ID 登陆 iCloud,这样就可以启用同步 IE、Firefox 或 Chrome 浏览器书签的功能了。 在设置过程中,我们...

    兼容FF-IE-Opera-Safari的日期选择控件

    "兼容FF-IE-Opera-Safari的日期选择控件" 提供了针对多种主流浏览器(Firefox, Internet Explorer, Opera, Safari)的解决方案,确保在不同平台和设备上的一致性体验。以下将详细讲解这两款控件及其相关知识点: 1....

    html js脚本日历控件

    7. **兼容性**:考虑到浏览器的多样性,编写JavaScript日历控件时需要关注跨浏览器的兼容性问题,确保在不同的浏览器(如Chrome、Firefox、Safari、Edge和IE)上都能正常工作。 在提供的文件名中,"calendar.html"...

    js日历 12种js日历

    这意味着组件应该能够在各种浏览器和设备上正常工作,包括老版本的IE浏览器、现代的Chrome、Firefox、Safari以及移动设备上的浏览器。 5. **文件列表分析** - `Setup.rar`:这是一个意外上传的文件,被360检测为...

    Ext的日历组件ExtCalendar.zip

    Ext Calendar 是 ExtJS 的一个功能非常强大的日历显示组件,支持包括 IE、Firefox、Safari、Chrome 和 Opera 浏览器。 类结构图如下所示: 运行效果图如下: 标签:ExtCalendar

    移动端 滑动日历 mobiscroll

    在兼容性方面,Mobiscroll表现出色,支持多种浏览器,包括Chrome、Firefox、Safari、Android内置浏览器以及IE9及以上版本,确保了在各种平台上的稳定运行。此外,它还兼容主流的移动操作系统,如iOS、Android和...

    CSS+HTC日历选择控件

    由于HTC是Internet Explorer的专属技术,因此这个日历控件只能在IE浏览器中正常工作,对于其他如Chrome、Firefox、Safari等非IE浏览器,可能需要使用其他的解决方案,如jQuery UI的Datepicker或者Bootstrap的...

    js日历控件自主选择颜色

    【描述】提到的"javasript日历控件"是一款多浏览器兼容的解决方案,意味着它不仅能在常见的Chrome、Firefox、Safari、Edge等浏览器上正常工作,还可能包括对老旧浏览器如IE的兼容性优化。"多选"功能允许用户同时选择...

    适用于任何浏览器的js日历代码

    本文将深入探讨如何使用JavaScript(特别是jQuery库)来创建一个兼容各种浏览器的日历代码,包括IE、Opera、Safari、Firefox和Mozilla。 首先,JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页动态...

    jquery兼容所有浏览器双日历控件

    这个双日历控件充分利用了jQuery的这些优点,确保在所有主流浏览器(如Chrome、Firefox、Safari、Edge、IE等)上都能正常运行,避免了因浏览器兼容性问题导致的用户体验下降。 日历控件通常包含以下几个关键功能: ...

    js日历控件兼容所有浏览器

    - **跨浏览器支持**:My97 DatePicker的核心目标就是提供一个能在所有主流浏览器中正常工作的日历组件,包括IE6及更高版本,Firefox,Chrome,Safari,Opera等。 - **丰富的自定义选项**:它提供了大量的配置参数...

    兼容多浏览器js 日历控件大全

    在早期的Web开发中,由于浏览器之间的兼容性问题,尤其是IE与其他浏览器(如Firefox、Chrome、Safari)之间的差异,实现跨浏览器的JS功能是一项艰巨的任务。日历控件作为一项复杂的交互组件,其兼容性尤为重要。以下...

    Javascript编写的兼容性好的日历控件

    具体兼容ie6-ie10 、Google chrome、firefox、safari、opera 以及使用ie内核和谷歌chrome内核的浏览器(如360浏览器,世界之窗,百度浏览器,搜狗浏览器) Calendar.js文件首行的注释介绍了控件的用法 用浏览器打开...

    JQ实现行程与日历源码

    5. **兼容性**:jQuery库的一个优点是它对浏览器的良好兼容性,所以由JQ实现的行程与日历源码也应能在主流浏览器上运行良好,包括Chrome、Firefox、Safari、Edge和旧版IE。 6. **响应式设计**:考虑到现代网页的多...

    日历控件大全

    开发者需要进行广泛的兼容性测试,包括IE、Firefox、Chrome、Safari和Edge等。 总的来说,JavaScript日历控件是一个涉及前端多方面技术的综合实践。从基本的HTML/CSS/JavaScript语法,到高级的插件使用、性能优化和...

    我的项目中常用的日历js文件

    9. **兼容性**: 考虑到浏览器的兼容性问题,你需要确保选择的日历库能支持主流的浏览器,如Chrome、Firefox、Safari、Edge以及IE11及以上版本。 10. **版本管理和更新**: 使用npm或yarn等包管理工具可以帮助跟踪和...

Global site tag (gtag.js) - Google Analytics