js实现日历控件

最新推荐文章于 2023-02-28 11:32:44 发布
最新推荐文章于 2023-02-28 11:32:44 发布
阅读量1.3k 收藏
点赞数
分类专栏： javascript 文章标签： 日历 function calendar border null button
//calendar.js
function atCalendarControl(){
  var calendar=this;
  this.calendarPad=null;
  this.prevMonth=null;
  this.nextMonth=null;
  this.prevYear=null;
  this.nextYear=null;
  this.goToday=null;
  this.calendarClose=null;
  this.calendarAbout=null;
  this.head=null;
  this.body=null;
  this.today=[];
  this.currentDate=[];
  this.sltDate;
  this.target;
  this.source;
  /************** 加入日历底板及阴影 *********************/
  this.addCalendarPad=function(){
    document.write("<div id='divCalendarpad' style='position:absolute;top:100px;left:0;width:255px;height:167px;display:none;'>");
    document.write("<iframe frameborder=0 height=168px width=255px></iframe>");
    document.write("<div style='position:absolute;top:4px;left:4px;width:248px;height:164px;background-color:#336699;'></div>");
    document.write("</div>");
    calendar.calendarPad=document.all.divCalendarpad;
  }
  /************** 加入日历面板 *********************/
  this.addCalendarBoard=function(){
    var BOARD=this;
    var divBoard=document.createElement("div");
    calendar.calendarPad.insertAdjacentElement("beforeEnd",divBoard);
    divBoard.style.cssText="position:absolute;top:0;left:0;width:250px;height:166px;border:1px outset;background-color:buttonface;";
    var tbBoard=document.createElement("table");
    divBoard.insertAdjacentElement("beforeEnd",tbBoard);
    tbBoard.style.cssText="position:absolute;top:0;left:0;width:100%;height:10px;font-size:12px;";
    tbBoard.cellPadding=0;
    tbBoard.cellSpacing=1;
    tbBoard.bgColor="#333333";
  /************** 设置各功能按钮的功能 *********************/
    /*********** Calendar About Button ***************/
    trRow = tbBoard.insertRow(0);
    calendar.calendarAbout=calendar.insertTbCell(trRow,0,"-","center");
    calendar.calendarAbout.οnclick=function(){calendar.about();}
    /*********** Calendar Head ***************/
    tbCell=trRow.insertCell(1);
    tbCell.colSpan=5;
    tbCell.bgColor="#99CCFF";
    tbCell.align="center";
    tbCell.style.cssText = "cursor:default";
    calendar.head=tbCell;
    /*********** Calendar Close Button ***************/
    tbCell=trRow.insertCell(2);
    calendar.calendarClose = calendar.insertTbCell(trRow,2,"x","center");
    calendar.calendarClose.title="关闭";
    calendar.calendarClose.οnclick=function(){calendar.hide();}
    /*********** Calendar PrevYear Button ***************/
    trRow = tbBoard.insertRow(1);
    calendar.prevYear = calendar.insertTbCell(trRow,0,"&lt;&lt;","center");
    calendar.prevYear.title="上一年";
    calendar.prevYear.οnmοusedοwn=function(){
      calendar.currentDate[0]--;
      calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
    }
    /*********** Calendar PrevMonth Button ***************/
    calendar.prevMonth = calendar.insertTbCell(trRow,1,"&lt;","center");
    calendar.prevMonth.title="上一月";
    calendar.prevMonth.οnmοusedοwn=function(){
      calendar.currentDate[1]--;
      if(calendar.currentDate[1]==0){
        calendar.currentDate[1]=12;
        calendar.currentDate[0]--;
      }
      calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
    }
    /*********** Calendar Today Button ***************/
    calendar.goToday = calendar.insertTbCell(trRow,2,"今天","center",3);
    calendar.goToday.title="选择今天";
    calendar.goToday.οnclick=function(){
      calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2];
      calendar.target.value=calendar.sltDate;
      calendar.hide();
      //calendar.show(calendar.target,calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2],calendar.source);
    }
    /*********** Calendar NextMonth Button ***************/
    calendar.nextMonth = calendar.insertTbCell(trRow,3,"&gt;","center");
    calendar.nextMonth.title="下一月";
    calendar.nextMonth.οnmοusedοwn=function(){
      calendar.currentDate[1]++;
      if(calendar.currentDate[1]==13){
        calendar.currentDate[1]=1;
        calendar.currentDate[0]++;
      }
      calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
    }
    /*********** Calendar NextYear Button ***************/
    calendar.nextYear = calendar.insertTbCell(trRow,4,"&gt;&gt;","center");
    calendar.nextYear.title="下一年";
    calendar.nextYear.οnmοusedοwn=function(){
      calendar.currentDate[0]++;
      calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
    }
    trRow = tbBoard.insertRow(2);
    var cnDateName = new Array("周日","周一","周二","周三","周四","周五","周六");
    for (var i = 0; i < 7; i++) {
      tbCell=trRow.insertCell(i)
      tbCell.innerText=cnDateName[i];
      tbCell.align="center";
      tbCell.width=35;
      tbCell.style.cssText="cursor:default;border:1px solid #99CCCC;background-color:#99CCCC;";
    }
    /*********** Calendar Body ***************/
    trRow = tbBoard.insertRow(3);
    tbCell=trRow.insertCell(0);
    tbCell.colSpan=7;
    tbCell.height=97;
    tbCell.vAlign="top";
    tbCell.bgColor="#F0F0F0";
    var tbBody=document.createElement("table");
    tbCell.insertAdjacentElement("beforeEnd",tbBody);
    tbBody.style.cssText="position:relative;top:0;left:0;width:245px;height:103px;font-size:12px;"
    tbBody.cellPadding=0;
    tbBody.cellSpacing=1;
    calendar.body=tbBody;
  }
  /************** 加入功能按钮公共样式 *********************/
  this.insertTbCell=function(trRow,cellIndex,TXT,trAlign,tbColSpan){
    var tbCell=trRow.insertCell(cellIndex);
    if(tbColSpan!=undefined) tbCell.colSpan=tbColSpan;
    var btnCell=document.createElement("button");
    tbCell.insertAdjacentElement("beforeEnd",btnCell);
    btnCell.value=TXT;
    btnCell.style.cssText="width:100%;border:1px outset;background-color:buttonface;";
    btnCell.οnmοuseοver=function(){
      btnCell.style.cssText="width:100%;border:1px outset;background-color:#F0F0F0;";
    }
    btnCell.οnmοuseοut=function(){
      btnCell.style.cssText="width:100%;border:1px outset;background-color:buttonface;";
    }
  // btnCell.οnmοusedοwn=function(){
  //  btnCell.style.cssText="width:100%;border:1 inset;background-color:#F0F0F0;";
  // }
    btnCell.οnmοuseup=function(){
      btnCell.style.cssText="width:100%;border:1px outset;background-color:#F0F0F0;";
    }
    btnCell.οnclick=function(){
      btnCell.blur();
    }
    return btnCell;
  }
  this.setDefaultDate=function(){
    var dftDate=new Date();
    calendar.today[0]=dftDate.getYear();
    calendar.today[1]=dftDate.getMonth()+1;
    calendar.today[2]=dftDate.getDate();
  }
  /****************** Show Calendar *********************/
  this.show=function(targetObject,defaultDate,sourceObject){
    if(targetObject==undefined) {
      alert("未设置目标对像. /n方法: ATCALENDAR.show(obj 目标对像,string 默认日期,obj 点击对像);/n/n目标对像:接受日期返回值的对像./n默认日期:格式为/"yyyy-mm-dd/",缺省为当日日期./n点击对像:点击这个对像弹出calendar,默认为目标对像./n");
      return false;
    }
    else      calendar.target=targetObject;
    if(sourceObject==undefined) calendar.source=calendar.target;
    else calendar.source=sourceObject;
    var firstDay;
    var Cells=new Array();
    if(defaultDate==undefined || defaultDate==""){
      var theDate=new Array();
      calendar.head.innerText = calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2];
      theDate[0]=calendar.today[0]; theDate[1]=calendar.today[1]; theDate[2]=calendar.today[2];
    }
    else{
      var reg=/^/d{4}-/d{1,2}-/d{1,2}$/
      if(!defaultDate.match(reg)){
        alert("默认日期的格式不正确/n/n默认日期可接受格式为:'yyyy-mm-dd'");
        return;
      }
      var theDate=defaultDate.split("-");
      calendar.head.innerText = defaultDate;
    }
    calendar.currentDate[0]=theDate[0];
    calendar.currentDate[1]=theDate[1];
    calendar.currentDate[2]=theDate[2];
    theFirstDay=calendar.getFirstDay(theDate[0],theDate[1]);
    theMonthLen=theFirstDay+calendar.getMonthLen(theDate[0],theDate[1]);
    //calendar.setEventKey();
    calendar.calendarPad.style.display="";
    var theRows = Math.ceil((theMonthLen)/7);
    //清除旧的日历;
    while (calendar.body.rows.length > 0) {
      calendar.body.deleteRow(0)
    }
    //建立新的日历;
    var n=0;day=0;
    for(i=0;i<theRows;i++){
      theRow=calendar.body.insertRow(i);
      for(j=0;j<7;j++){
        n++;
        if(n>theFirstDay && n<=theMonthLen){
          day=n-theFirstDay;
          calendar.insertBodyCell(theRow,j,day);
        }
        else{
          var theCell=theRow.insertCell(j);
          theCell.style.cssText="background-color:#F0F0F0;cursor:default;";
        }
      }
    }
    //****************调整日历位置**************//
    var offsetPos=calendar.getAbsolutePos(calendar.source);//计算对像的位置;
    if((document.body.offsetHeight-(offsetPos.y+calendar.source.offsetHeight-document.body.scrollTop))<calendar.calendarPad.style.pixelHeight){
      var calTop=offsetPos.y-calendar.calendarPad.style.pixelHeight;
    }
    else{
      var calTop=offsetPos.y+calendar.source.offsetHeight;
    }
    if((document.body.offsetWidth-(offsetPos.x+calendar.source.offsetWidth-document.body.scrollLeft))>calendar.calendarPad.style.pixelWidth){
      var calLeft=offsetPos.x;
    }
    else{
      var calLeft=calendar.source.offsetLeft+calendar.source.offsetWidth;
    }
    //alert(offsetPos.x);
    calendar.calendarPad.style.pixelLeft=calLeft;
    calendar.calendarPad.style.pixelTop=calTop;
  }
  /****************** 计算对像的位置 *************************/
  this.getAbsolutePos = function(el) {
    var r = { x: el.offsetLeft, y: el.offsetTop };
    if (el.offsetParent) {
      var tmp = calendar.getAbsolutePos(el.offsetParent);
      r.x += tmp.x;
      r.y += tmp.y;
    }
    return r;
  };
  //************* 插入日期单元格 **************/
  this.insertBodyCell=function(theRow,j,day,targetObject){
    var theCell=theRow.insertCell(j);
    if(j==0) var theBgColor="#FF9999";
    else var theBgColor="#FFFFFF";
    if(day==calendar.currentDate[2]) var theBgColor="#CCCCCC";
    if(day==calendar.today[2]) var theBgColor="#99FFCC";
    theCell.bgColor=theBgColor;
    theCell.innerText=day;
    theCell.align="center";
    theCell.width=35;
    theCell.style.cssText="border:1px solid #CCCCCC;cursor:hand;";
    theCell.οnmοuseοver=function(){
      theCell.bgColor="#FFFFCC";
      theCell.style.cssText="border:1px outset;cursor:hand;";
    }
    theCell.οnmοuseοut=function(){
      theCell.bgColor=theBgColor;
      theCell.style.cssText="border:1px solid #CCCCCC;cursor:hand;";
    }
    theCell.οnmοusedοwn=function(){
      theCell.bgColor="#FFFFCC";
      theCell.style.cssText="border:1px inset;cursor:hand;";
    }
    theCell.οnclick=function(){
      if(calendar.currentDate[1].length<2) calendar.currentDate[1]="0"+calendar.currentDate[1];
      if(day.toString().length<2) day="0"+day;
      calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+day;
      calendar.target.value=calendar.sltDate;
      calendar.hide();
    }
  }
  /************** 取得月份的第一天为星期几 *********************/
  this.getFirstDay=function(theYear, theMonth){
    var firstDate = new Date(theYear,theMonth-1,1);
    return firstDate.getDay();
  }
  /************** 取得月份共有几天 *********************/
  this.getMonthLen=function(theYear, theMonth) {
    theMonth--;
    var oneDay = 1000 * 60 * 60 * 24;
    var thisMonth = new Date(theYear, theMonth, 1);
    var nextMonth = new Date(theYear, theMonth + 1, 1);
    var len = Math.ceil((nextMonth.getTime() - thisMonth.getTime())/oneDay);
    return len;
  }
  /************** 隐藏日历 *********************/
  this.hide=function(){
    //calendar.clearEventKey();
    calendar.calendarPad.style.display="none";
  }
  /************** 从这里开始 *********************/
  this.setup=function(defaultDate){
    calendar.addCalendarPad();
    calendar.addCalendarBoard();
    calendar.setDefaultDate();
  }
  /************** 关于AgetimeCalendar *********************/
  this.about=function(){
    /*//alert("Agetime Calendar V1.0/n/nwww.agetime.com/n");
    popLeft = calendar.calendarPad.style.pixelLeft+4;
    popTop = calendar.calendarPad.style.pixelTop+25;
    var popup = window.createPopup();
    var popupBody = popup.document.body;
    popupBody.style.cssText="border:solid 2 outset;font-size:9pt;background-color:#F0F0F0;";
    var popHtml = "<span style='color:#336699;font-size:12pt;'><U>关于 AgetimeCalendar</U></span><BR><BR>";
    popHtml+="版本: v1.0<BR>日期: 2004-03-13";
    popupBody.innerHTML=popHtml;
    popup.show(popLeft,popTop,240,136,document.body); */
    var strAbout = "关于JS日历控件/n/n";
    strAbout+="-/t: 关于/n";
    strAbout+="x/t: 隐藏/n";
    strAbout+="<</t: 上一年/n";
    strAbout+="</t: 上一月/n";
    strAbout+="今日/t: 返回当天日期/n";
    strAbout+=">/t: 下一月/n";
    strAbout+="<</t: 下一年/n";
    strAbout+="/nJS日历控件/n";
    alert(strAbout);
  }
  calendar.setup();
  }
var CalendarWebControl = new atCalendarControl();
 
//test.html
<head>
<title>日历控件</title>
<style type="text/css">
body{
font-size: 12px;
color: #666;
}
form{
margin: 0px;
width: 400px;
border: solid 1px #CCC;
}
.bo{
border-bottom: solid 1px #CCC;
}
label{
width: 80px;
float: left;
padding: 10px 0px 4px 15px;
}
input{
padding: 1px;
}
input,textarea{
border: 1px solid #CCC;
margin: 5px 0px;
}
textarea{
padding: 2px;
}
.bt{
width: 38px;
height: 20px;
font-size: 12px;
border: solid 1px #CCC;
background: #FBFBFB;
text-align: center;
}
.btcenter{
text-align: center;
clear: left;
padding: 4px 0px 0px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="calendar.js"></script>
</head>
<body>
<form action="#" method="post" name="add" id="add">
<label>日期：</label>
<input name="date" type="text" id="date" size="20" maxlength="16" />
<input name="reset" type="reset" class="bt" style="width:80px;" value="显示日历"οnclick="CalendarWebControl.show(add.date,'',this);" />
</form>
</body>
</html>
wangfang_0728
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
有关js的日历控件大全
08-07 6970
经常会用到日历控件，现在就整理一下，好看即好用的日历控件第一种方案1.建立一个JS文件：Calendar.jsvar cal;var isFocus=false; //是否为焦点//function SelectDate(obj,strFormat) //两个参数改为只传一个function SelectDate(obj)...{    var date = new Date();
js 生成日历控件
NET情歌专栏
05-22 725
/*************************************************/         //创建时间         var createTime = new Array();         //事务标题         var caption = new Array();         //事务类型         var type = new A
js 日历控件 calendar
11-26
js 日历控件 calendar，js 日历控件 calendar，js 日历控件 calendar，js 日历控件 calendar，js 日历控件 calendar，js 日历控件 calendar
js 日历控件
weixin_48495574的博客
02-28 1074
仿日历的js代码
JS处理日历控件
没有一劳永逸，永远要重新开始，重新进入动荡，重新寻找，重新赢得欢喜。
03-14 4056
一、前言 在web自动化的过程中，我们遇到的日历控制这样的场景，大致分为两种： 1、可以直接输入日期 2、不能够直接输入日期，只能选择 二、js处理日期控件的代码 1、方法一大致思路： （1）处理场景：日期输入框不能直接输入日期，只能选择 （2）我们可以通过输入框的id属性去进行定位，并赋值给变量el （3）通过js代码来修改readonly和value的值，就用到了js代码中的arguments，相当于python中的format （4）通过execute_script()发送js指
精心挑选12款优秀的 JavaScript 日历和时间选择插件
Tizian的专栏
10-16 1779
今天这篇文章向大家分享12款精心挑选的优秀 JavaScript 日历和时间选择插件，都带有详细的使用教程和效果演示。这些插件能够帮助 Web 开发人员更快速的实现各种精美的日历和时间选择效果。同时推荐阅读的博文中还有更多实现各种网站功能的 jQuery 优秀插件，欢迎大家可以去淘金。 1. The Coolest Calendar 界面非常漂亮的一款日期选择插件，有详细的使用文档，最
简单的 js 日历控件
m0_63156262的博客
05-27 351
需求背景，需要在日历上展示每天的消耗数据，有数据的高亮显示，测试集成日历控件，改起来太费劲，找了这个还可以，修改比较方便，记录下~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <ti...
javascript实现日历控件(年月日关闭按钮)
10-27
接下来，我们来看JavaScript代码实现这个日历控件： ```javascript sx.activex.calender = { bind: function(target) { // 创建HTML元素 // ... // 绑定事件，填充年份和月份下拉框 // ... // 设置样式 ...
纯javascript版日历控件
10-21
【纯JavaScript日历控件详解】 在Web开发中，日历控件是一种常见的交互元素，用于用户选择日期。本文将详细介绍如何使用纯JavaScript创建一个简单的日历控件，无需依赖任何外部库，如jQuery或其他框架。 首先，...
js 简易的日历控件
06-06
创建一个JavaScript日历控件涉及到以下几个关键知识点： 1. **DOM操作**：日历控件需要动态地在网页上生成元素，这需要利用JavaScript对文档对象模型（DOM）进行操作。例如，可以使用`document.createElement()`...
js实现的日期控件
07-10
用javaScript实现的一个日历，在一个文本框中你点击后会弹出一个日历给你选择日期，选择后日期显示在文本框中
javascript实现的日期控件
10-06
一个不错的js实现的日期控件。看例子直接就会用了。简单。
多样式js日历控件选择器代码
06-24
JavaScript日历控件通常是用JavaScript代码动态生成的，可以自定义样式、行为以及与用户交互的方式。 "多样式"一词表明这个日历控件支持多种视觉样式，这意味着开发者可以根据网页的整体设计自由调整控件的外观，以...
js日历控件
qq30211478的博客
07-08 1667
1.由于项目需要，需要一个精确到分钟的日历控件，具体如下图所示。 2.具体包括WebCalendar.js和一个schedule.jsp两个文件，源码如下。 （1）WebCalendar.js varcal; varisFocus=false;//是否为焦点 varpickMode={ "second":1, "minute":...
JS实现日历控件
葵歌小妖
08-07 6712
做图书馆维护系统时，遇到这样一个问题——很多地方需要根据日期查询信息（比如：组长查询某段日期的审批记录，查询某段日期的维修记录等等）。大家都知道在做VB.net版查看某段日期收取金额记录时，有DatePicker日历控件（看似一个文本框，点击后弹出日历下拉框），很好用；但是图书馆维护系统是Web页面，没有这个控件，只有一个Calendar日历控件，但是这种日历控件面积太大，博客网页上常用这个控件。
js实现日历组件
weixin_45493439的博客
09-08 4166
下载好之后需要在文件里的最后一行加入默认导出 calendar,(不加也行)calendar 是一个根据阳历转阴历的封装方法;
JS日历控件
billfranck的专栏
09-06 933
一个非常流行的javascript写的日历控件：js/calendar.js：document.write("");document.write("");function writeIframe(){   var strIframe = "" +   "*{font-size: 12px; font-family: 宋体}" +   ".bg{ color: " + WebCalendar
js日历控件大全
lvmengmeng
05-29 877
转自：http://down.admin5.com/demo/code_pop/18/1299/ 通过chrome浏览器右键审查元素或者火狐浏览器firebug可以查看源代码 常规弹出日历示例页 1. 在控件下面或右面弹出日历组件（默认是在下面弹出）  显示在下面      显示在右面 2. 通过按钮或图片等其它控件弹出日历组件        
JSCalendar 日历控件
dazhi_100的专栏
02-27 5058
JSCalendar 日历控件 1. K 可以自己换皮肤，有好几套，可以设置日期时间格式==，下面地址可以下载 1. 概述     日历控件我们使用dynarch的JSCalendar: http://www.dynarch.com/projects/calendar/     下载包中有完整的sample 和 文档。 1.1 SpringSide 的封装与修改
selenium 日历控件
最新发布
09-03
如果日历控件是通过 JavaScript 或其他技术实现的自定义控件，那么你可能需要使用 Selenium 的其他方法来模拟用户与控件的交互。例如，你可以使用 `click` 方法点击日历图标或其他触发器来打开日历控件，并使用 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值