/* author:zheyiw
* date:23/7/2009
* version:1.1
* 使用举例: onclick="ShowCalendar('InputBoxID','outputBoxID')"
* InputBoxID是按钮控件 outputBoxID是日期输出的文本框
*/
/* 历史版本信息:
* v1 原始版本
* v1.1 添加拖动功能, 高亮显示当天,添加:加减年份
*/
//定义一块区域
document.writeln("<div id='Calendar' style='position:absolute; z-index:1; visibility: hidden; filter:\"progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3)\"'></div>");
//document.writeln("<div id='Calendar' style='position:absolute; z-index:1; visibility: hidden; '></div>");
//document.writeln('<iframe id="Calendar" name=wpCalendarLayer frameborder=0 onmouseout="wpCalendar.correctPosition()" style="position: absolute; width: 153; height: 208; z-index: 9998; display: none"></iframe>');
//输出数据变量
var outputData;
//确定日历位置,显示当前日期
function ShowCalendar(InputBox,outputBox)
{
outputData=document.getElementById(outputBox);
var x,y;
// var o=eval("document.all."+InputBox); // var o=eval("document.getElementById(InputBox)");
//控制控件出现的位置
var o=document.getElementById(InputBox); //传入字符串时
x=o.offsetLeft;
y=o.offsetTop;
while(o=o.offsetParent)
{
x+=o.offsetLeft;
y+=o.offsetTop;
}
document.getElementById("Calendar").style.left=x+2+"px";
document.getElementById("Calendar").style.top=y+20+"px";
document.getElementById("Calendar").style.visibility="visible"; //显示div
var objdate=new Date();
MainCalendar(objdate.getYear(),objdate.getMonth(),objdate.getDate());
}
//绘制日历
function MainCalendar(year,month,day)
{
var intLoop,intWeeks,intDays;
var DivContent="";
//插入一个表格
var objdate=new Date();
var firstDay=new Date(year, month, 1).getDay(); //得到第一天是星期几
var maxday=new Date(year, month+1, 0).getDate(); //得到当前月的天数
DivContent+="<table border='0' cellspacing='0' style='border:1px solid #0066FF; background-color:#EDF2FC'>";
var strMonthMin="monthMin("+ year +","+ month +","+ day +")";
var strMonthAdd="monthAdd("+ year +","+ month +","+ day +")";
var strYearMin="yearMin("+ year +","+ month +","+ day +")";
var strYearAdd="yearAdd("+ year +","+ month +","+ day +")";
DivContent+="<tr><td align=center ><input type='button' onclick="+ strMonthAdd +" value='<'/> </td>"
DivContent+="<td align=center ><input type='button' onclick="+ strYearMin +" value='<<'/> </td>" //年份减
DivContent+="<td align=center colspan=3>"+ year +":"+ (month+1) +"</td>"
DivContent+="<td align=center ><input type='button' onclick="+ strYearAdd +" value='>>'/> </td> " //年份加
DivContent+="<td align=center ><input type='button' onclick="+ strMonthMin +" value='>'/> </td></tr>";
DivContent+="<tr id='moveTR' style='cursor: move ' onmousedown='DragStart()' onmouseup='DragEnd()'><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td><tr>";
var d=1,dd=1;
for(var i=0;i<6;i++)
{
DivContent+="<tr>";
var strOutData="outData(this,"+ year +","+ month +")";
for(var j=1;j<8;j++)
{
if(d<=firstDay || dd>maxday) { DivContent+="<td> </td>";}
else if(dd==Number(objdate.getDate()) && month==Number(objdate.getMonth()) && year==Number(objdate.getYear())) {
DivContent+="<td bgcolor='silver' onmouseover='MouseOver(this)' onmouseout='MouseOut(this)' onclick="+strOutData+">"+dd+"</td>";
dd++;
}
else {
DivContent+="<td onmouseover='MouseOver(this)' onmouseout='MouseOut(this)' onclick="+strOutData+">"+dd+"</td>";
dd++;
}
d++;
}
DivContent+="</tr>";
}
DivContent+="</table>";
//在区域中插入html
document.getElementById("Calendar").innerHTML=DivContent;
// newCalendar();
}
/*开始日历拖动*/
function DragStart()
{
var o =document.getElementById("Calendar");
o.onselectstart = function()
{
return(false);
};
o.onmousedown = function(e)
{
// e = e||window.event; // var x=e.layerX||e.offsetX; // var y=e.layerY||e.offsetY; // e = window.event; // var x=e.offsetX; //var y=e.offsetY;
var xx = mouseAbsolutePostion(e).x; //鼠标绝对位置
var yy = mouseAbsolutePostion(e).y; //
var ox = o.offsetLeft ;// div绝对位置
var oy = o.offsetTop;//
var x=xx-ox;
var y=yy-oy;
o.onmousemove = function(e)
{//鼠标移动时计算控件位置
e=window.event;
o.style.left=(e.clientX-x)+"px";
o.style.top=(e.clientY-y)+"px";
};
o.onmouseup=function()
{
o.onmousemove=null;
};
};
}
//关于这个拖动函数的理解:function DragStart()就是一个对象,当鼠标按下后就创建了这个对象,并且从来没有销毁。
//o.onmousedown o.onmousemove o.onmouseup三个函数被激活。
//所以在日历没有被拖动前,在其他地方是不能拖动的。
//但日历被拖动过一次后,在其他地方o.onmousedown会开始响应,重新计算坐标,作出移动动作。
function mouseAbsolutePostion(evt)
{
evt = event ? event : window.event;
return {x:evt.clientX,y:evt.clientY};
}
/*结束日历拖动*/
function DragEnd()
{
}
//月份增加
function monthAdd(year,month,day)
{
var DivContent="";
if (month==11) {month=0;year++;}
else {month++;}
document.getElementById("Calendar").innerHTML=DivContent;
MainCalendar(year,month,day);
}
//月份减少
function monthMin(year,month,day)
{
var DivContent="";
if (month==0) {month=11;year--;}
else {month--;}
document.getElementById("Calendar").innerHTML=DivContent;
MainCalendar(year,month,day);
}
//年份增加
function yearAdd(year,month,day)
{
var DivContent="";
document.getElementById("Calendar").innerHTML=DivContent;
MainCalendar(year+1,month,day);
}
//年份减少
function yearMin(year,month,day)
{
var DivContent="";
document.getElementById("Calendar").innerHTML=DivContent;
MainCalendar(year-1,month,day);
}
//鼠标经过
function MouseOver(obj)
{
obj.style.background="blue";
}
//鼠标离开
function MouseOut(obj)
{
obj.style.background="#EDF2FC";
}
//输出数据
function outData(obj,year,month)
{
var a=year+"-"+(month+1)+"-"+obj.innerText;
outputData.value=a;
document.getElementById("Calendar").innerHTML="";
}
分享到:
相关推荐
JavaScript日历是一个常见的网页交互元素,它为用户提供了一个方便的方式来选择日期,常见于表单填写、事件安排等场景。在Web开发中,JavaScript日历组件的实现主要依赖于JavaScript语言和CSS来完成页面布局和样式...
在这个主题中,我们主要关注的是“js日历 12种js日历”,这显然是一份包含了多种不同实现方式的JavaScript日历组件集合。 1. **日历组件的基本概念** 日历组件是网页中常见的交互元素,它允许用户选择日期,通常...
此程序是javascript和php开发,提供酒店、门票订购的价格日历和点击日历订购产品功能。详细请参考驴妈妈 酒店和门票的价格日历。 index.html 入口文件 data.php 包含一个价格日历生成类和 一些实例 product.php ajax...
7. **兼容性**:考虑到浏览器的多样性,编写JavaScript日历控件时需要关注跨浏览器的兼容性问题,确保在不同的浏览器(如Chrome、Firefox、Safari、Edge和IE)上都能正常工作。 在提供的文件名中,"calendar.html"...
本文将详细介绍三款JavaScript日历插件,它们各具特色,能够为你的网页增添别致的用户体验。 第一款日历插件可能是“32008731155337.rar”中的内容。虽然具体名称未知,但我们可以假设它是一款简洁且功能丰富的日历...
JavaScript(JS)日历控件是网页开发中常用的一种组件,用于展示日期选择功能,通常在表单中作为输入辅助工具出现。它们可以提供用户友好的界面,方便用户选择日期,而无需手动输入。以下是对JS日历控件的一些详细...
JavaScript日历控件是网页开发中常用的一种交互元素,它能帮助用户方便地选择日期,常见于表单输入、事件安排或时间相关的功能。在给定的资源中,包含了六种不同样式的JavaScript日历,这些日历可能具有不同的设计...
本篇文章将详细探讨JavaScript日历控件的设计原理、实现方式以及常见的使用技巧。 首先,我们需要了解JavaScript的基本概念。JavaScript是一种轻量级的解释型编程语言,主要运行在浏览器环境中,用于增加网页的交互...
总结来说,这个压缩包提供了一个完整的JavaScript日历记事器,包括了前端展示所需的HTML、CSS和JS文件,以及必要的图片资源和用户指南。通过解压并运行index.htm,用户可以在本地浏览器中查看和测试这个日历组件的...
JavaScript(简称JS)是一种轻量级的解释型编程语言,广泛用于网页和网络应用开发,尤其是在客户端脚本处理上。JS日历控件是前端开发中常见的一种组件,主要用于显示日期选择器,用户可以通过它方便地选取日期。本文...
【标题】"日文版javascript日历"是一个专门针对日语环境设计的JavaScript日历控件,它提供了方便的日历显示和交互功能,尤其适用于需要日文日期展示的Web应用程序。这个控件不仅包含了完整的日历功能,还带有详细的...
JavaScript日历组件是Web开发中常见的一种交互元素,主要用于用户在网页上进行日期选择操作。在前端开发领域,尤其在构建交互式用户界面时,一个功能强大的日历组件显得尤为重要。"My97DatePicker"是一个知名的...
【标题】"js日历控件自主选择颜色" 涉及的核心技术是JavaScript日历插件的开发,尤其强调用户可以根据个人喜好自定义颜色。这样的控件在网页设计中非常常见,主要用于处理与日期相关的交互,如日期选择、预约系统、...
本项目“纯JS日历表格”旨在提供一个完全使用JavaScript实现的日历视图,允许开发者轻松集成到自己的应用中,进行定制化开发。 日历功能在许多网站和应用程序中都是必不可少的,例如事件管理、预约系统或时间跟踪...
在网页中实现一个“超好日历表”通常涉及到JavaScript的核心概念、DOM操作、事件处理以及可能的日期时间处理。下面我们将深入探讨这些知识点。 首先,JavaScript的核心概念包括变量、数据类型、控制结构(如条件...
JavaScript日历控件是网页开发中的重要组成部分,尤其在...这个“js日历控件大全”资源包是开发者学习和实践JavaScript日历控件的宝贵素材,通过研究和实践,你可以掌握不同日历控件的实现原理,提升网页交互设计能力。
这里我们将深入探讨如何优化JavaScript日历控件,特别是那些包含时分秒选择,以及支持年月日显示的组件。 1. **性能优化**:在创建日历控件时,减少DOM操作是关键。利用虚拟DOM或仅在必要时更新DOM可以显著提升性能...
- **FullCalendar**: 这是一个全功能的JavaScript日历组件,支持显示日程、周视图和月视图,可以与其他数据源(如Google Calendar或JSON)集成,适合构建复杂的日历应用。 - **Pickadate.js**: 这是一个轻量级且...
总的来说,"史上最强js日历控件"可能是一个集成了各种高级特性和自定义选项的JavaScript日历组件,它可以帮助开发者快速地在网页应用中实现强大的日期选择功能。通过深入研究和理解提供的压缩包内容,开发者可以有效...
js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar