JS脚本实现日历的控件效果

原创 2007年09月30日 18:49:00


//日历
var date_start,date_end,g_object
var today = new Date();
var separator="-";
var inover=false;

//mode :时间变换的类型0-年 1-月 2-直接选择月
function change_date(temp,mode)
{
 var t_month,t_year
    if (mode){
        if(mode==1)
        t_month=parseInt(cele_date_month.value,10)+parseInt(temp,10);
        else
        t_month=parseInt(temp)
        if (t_month<cele_date_month.options(0).text) {
            cele_date_month.value=cele_date_month.options(cele_date_month.length-1).text;
            change_date(parseInt(cele_date_year.value,10)-1,0);
            }
        else{
            if (t_month>cele_date_month.options(cele_date_month.length-1).text){
                cele_date_month.value=cele_date_month.options(0).text;
                change_date(parseInt(cele_date_year.value,10)+1,0);
                }           
            else
                {cele_date_month.value=t_month;
                 set_cele_date(cele_date_year.value,cele_date_month.value);               
                }
        }
    } 
    else{
        t_year=parseInt(temp,10);
       
        if (t_year<cele_date_year.options(0).text) {
            cele_date_year.value=cele_date_year.options(0).text;
            set_cele_date(cele_date_year.value,1);               
            }
        else{
            if (parseInt(t_year,10)>parseInt(cele_date_year.options(cele_date_year.length-1).text,10)){
                cele_date_year.value=cele_date_year.options(cele_date_year.length-1).text;
                set_cele_date(cele_date_year.value,12);               
                }           
            else
                {cele_date_year.value=t_year;
                 set_cele_date(cele_date_year.value,cele_date_month.value);               
                }
        }
    }
    /*********2002-02-01 MODIFY BY WING **************/
    window.cele_date.focus();
    /****************MODIFY END***********************/
}

 

//初始化日历
function init(d_start,d_end)
{
     var temp_str;
     var i=0
     var j=0
     date_start=new Date(1980,7,1)
     date_end=new Date(2004,8,1)
     document.writeln("<div name=/"cele_date/" id=/"cele_date/"  style=/"display:none/"    style=/"LEFT: 69px; POSITION: absolute; TOP: 159px;Z-INDEX:99/" onClick=/"event.cancelBubble=true;/" onBlur=/"hilayer()/" onMouseout=/"lostlayerfocus()/">-</div>");
     window.cele_date.innerHTML="";
     temp_str="<table border=/"1/" bgcolor=/"#DDDDDD/" bordercolor=/"white/"><tr><td colspan=7 onmouseover=/"overcolor(this)/">";
     temp_str+="<input type=/"Button/" value=/"<</" onclick=/"change_date(-1,1)/" onmouseover=/"getlayerfocus()/" style=/"color: #000099; background-color: #BFBFBF; cursor: hand/">-";

     temp_str+=""
     temp_str+="<select name=/"cele_date_year/" id=/"cele_date_year/" language=/"javascript/" onchange=/"change_date(this.value,0)/" onmouseover=/"getlayerfocus()/" onblur=/"getlayerfocus()/" style=/"font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB/">"

     for (i=1900;i<=2020;i++)
     {
      temp_str+="<OPTION value=/""+i.toString()+"/">"+i.toString()+"</OPTION>";
     }
     temp_str+="</select>-";
     temp_str+=""
     temp_str+="<select name=/"cele_date_month/" id=/"cele_date_month/" language=/"javascript/" onchange=/"change_date(this.value,2)/" onmouseover=/"getlayerfocus()/" onblur=/"getlayerfocus()/" style=/"font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB/">"

     for (i=1;i<=12;i++)
     {
      temp_str+="<OPTION value=/""+i.toString()+"/">"+i.toString()+"</OPTION>";
     }
     temp_str+="</select>-";
     temp_str+=""
     temp_str+="<input type=/"Button/" value=/">>/" onclick=/"change_date(1,1)/" onmouseover=/"getlayerfocus()/"  style=/"color: #000099; background-color: #BFBFBF; cursor: hand/">";

     temp_str+="</td></tr><tr><td onmouseover=/"overcolor(this)/">"
     temp_str+="<font color=red>日</font></td><td>";temp_str+="一</td><td>"; temp_str+="二</td><td>"; temp_str+="三</td><td>"
     temp_str+="四</td><td>";temp_str+="五</td><td>"; temp_str+="六</td></tr>";
     for (i=1 ;i<=6 ;i++)
     {
     temp_str+="<tr>";
        for(j=1;j<=7;j++){
            temp_str+="<td name=/"c"+i+"_"+j+"/"id=/"c"+i+"_"+j+"/" style=/"CURSOR: hand/" style=/"COLOR:#000000/" language=/"javascript/" onmouseover=/"overcolor(this)/" onmouseout=/"outcolor(this)/" onclick=/"td_click(this)/">?</td>"
            }
     temp_str+="</tr>"       
     }
     temp_str+="</td></tr></table>";
     window.cele_date.innerHTML=temp_str;
}
function set_cele_date(year,month)
{
   var i,j,p,k
   var nd=new Date(year,month-1,1);
   event.cancelBubble=true;
   cele_date_year.value=year;
   cele_date_month.value=month;  
   k=nd.getDay()-1
   var temp;
   for (i=1;i<=6;i++)
      for(j=1;j<=7;j++)
      {
      eval("c"+i+"_"+j+".innerHTML=/"/"");
      eval("c"+i+"_"+j+".bgColor=/"#DDDDDD/"");
      eval("c"+i+"_"+j+".style.cursor=/"hand/"");
      }
   while(month-1==nd.getMonth())
    { j=(nd.getDay() +1);
      p=parseInt((nd.getDate()+k) / 7)+1;
      eval("c"+p+"_"+j+".innerHTML="+"/""+nd.getDate()+"/"");
      if ((nd.getDate()==today.getDate())&&(cele_date_month.value==today.getMonth()+1)&&(cele_date_year.value==today.getYear())){
        eval("c"+p+"_"+j+".bgColor=/"#EFFB64/"");
      }
      if (nd>date_end || nd<date_start)
      {
      eval("c"+p+"_"+j+".bgColor=/"#FF9999/"");
      eval("c"+p+"_"+j+".style.cursor=/"text/"");
      }
      nd=new Date(nd.valueOf() + 86400000)
    }
}

//s_object:点击的对象;d_start-d_end有效的时间区段;需要存放值的控件;
function show_cele_date(eP,d_start,d_end,t_object)
{
window.cele_date.style.display="";
window.cele_date.style.zIndex=99
var s,cur_d
var eT = eP.offsetTop; 
var eH = eP.offsetHeight+eT; 
var dH = window.cele_date.style.pixelHeight; 
var sT = document.body.scrollTop;
var sL = document.body.scrollLeft;
event.cancelBubble=true;
window.cele_date.style.posLeft = event.clientX-event.offsetX+sL-5; 
window.cele_date.style.posTop = event.clientY-event.offsetY+eH+sT-5;
if (window.cele_date.style.posLeft+window.cele_date.clientWidth>document.body.clientWidth) window.cele_date.style.posLeft+=eP.offsetWidth-window.cele_date.clientWidth;
if (d_start!=""){
    if (d_start=="today"){
        date_start=new Date(today.getYear(),today.getMonth(),today.getDate());
    }else{
        s=d_start.split(separator);
        date_start=new Date(s[0],s[1]-1,s[2]);
    }
}else{
    date_start=new Date(1900,1,1);
}

if (d_end!=""){
    s=d_end.split(separator);
    date_end=new Date(s[0],s[1]-1,s[2]);
}else{
    date_end=new Date(3000,1,1);
}

g_object=t_object

cur_d=new Date()
set_cele_date(cur_d.getYear(),cur_d.getMonth()+1);
window.cele_date.style.display="block";

window.cele_date.focus();

}
function td_click(t_object)
{
var t_d
//取当前的时间代码,不要可以去掉
var time= new Date();
hours=time.getHours();
mins=time.getMinutes();
secs=time.getSeconds();
//if (hours<10)
//hours="0"+hours;
//if(mins<10)
//mins="0"+mins;
//if (secs<10)
//secs="0"+secs;
//取当前时间结束
if (parseInt(t_object.innerHTML,10)>=1 && parseInt(t_object.innerHTML,10)<=31 )
{ t_d=new Date(cele_date_year.value,cele_date_month.value-1,t_object.innerHTML)
if (t_d<=date_end && t_d>=date_start)
{
var year = cele_date_year.value;
var month = cele_date_month.value;
var day = t_object.innerHTML;
//if (parseInt(month)<10) month = "0" + month;
//if (parseInt(day)<10) day = "0" + day;

g_object.value=year+separator+month+separator+day+" "+hours+":"+mins+":"+secs;//组合数据并写入控件
window.cele_date.style.display="none";};
}

}
function h_cele_date()
{
window.cele_date.style.display="none";
}

function overcolor(obj)
{
  if (obj.style.cursor=="hand") obj.style.color = "#FFFFFF";

  inover=true;
  window.cele_date.focus();

}

function outcolor(obj)
{
 obj.style.color = "#000000";
 inover=false;

}

function getNow(o){
    var Stamp=new Date();
    var year = Stamp.getYear();
    var month = Stamp.getMonth()+1;
    var day = Stamp.getDate();
    if(month<10){
 month="0"+month;
    }
    if(day<10){
 day="0"+day;
    }
    o.value=year+separator+month+separator+day;
}

function hilayer()
{
 if (inover==false)
 {
  var lay=document.all.cele_date;
  lay.style.display="none";
 }
}
function getlayerfocus()
{
 inover=true;
}
function lostlayerfocus()
{
 inover=false;
}
init();
//日历结束 

版权声明:本文为博主原创文章,未经博主允许不得转载。

js实现日历效果

效果图: js代码: function is_leap(year) { return (year%100==0?res=(year%400==0?1:0):res=(yea...
  • migu77777
  • migu77777
  • 2016年12月01日 19:13
  • 603

Android可签到的日历控件

最近在公司的功能需求中,需要实现可以签到的日历,签到后在签到过的日期做标志。本功能参考了网上一些大神的日历控件,在此基础上进行修改,已满足本公司的需求,现已完成,记录一下。布局文件:...
  • longxuanzhigu
  • longxuanzhigu
  • 2017年11月24日 15:26
  • 240

类似Google Calendar效果的简单实现

2007/11/02目前只是简单的实现了行选择的效果。后面的功能也是利用DIV来实现的并结合Ajax方法将登陆的数据保存到数据库中。DOCTYPE HTML PUBLIC "-//W3C//DTD H...
  • wanyongping
  • wanyongping
  • 2007年11月02日 11:22
  • 2366

Android又一个超漂亮的日历控件

※效果 ※使用方法 package com.fancyy.calendarweight; import java.util.ArrayList; import java.util.List; ...
  • u010785585
  • u010785585
  • 2014年07月23日 14:12
  • 3755

非常漂亮日历JS代码

网页上的日期台历 js代码 www.pigzz.com         A.menuitem {     COLOR: menutext; TEXT-DECORATION: none    ...
  • liuyuehui110
  • liuyuehui110
  • 2012年10月19日 11:18
  • 4423

android 仿日历翻页特效、仿htc时钟翻页特效、数字翻页切换

废话不多说,效果图: 自定义控件找自网络,使用相对简单,具体还没有来得及深入研究,只是先用笨方法大概实现了想要的效果,后续有空会仔细研究再更新文章, 本demo切换方法是用的笨...
  • fan7983377
  • fan7983377
  • 2017年07月11日 21:56
  • 1123

简单的日期选择控件的实现(弹出日历,选择日期)

项目地址:https://github.com/vikramkakkar/SublimePicker 星星 一千八的  值得拥有 很简单  直接compile  之后 就是 界面 自定义 Di...
  • fenlyer
  • fenlyer
  • 2017年07月05日 15:54
  • 476

实用的签到、日程表日历控件(可扩展)

当初写这个控件主要是为了每日签到。当然你也可以改成事件(日程表)的日历控件,所有代码和样式都会分享给你。javascript代码极其简单,详细请下载demo文件(最下方有下载链接)。其实网上能搜索到很...
  • xj447698556
  • xj447698556
  • 2015年11月28日 20:27
  • 6764

安卓可滑动的自定义日历控件的实现

最近用到的一个日历控件,记录下来造福人类, 效果如图 代码下载地址:点击打开链接 http://download.csdn.net/detail/swd2lx/9622167 布局文件 ...
  • swd2lx
  • swd2lx
  • 2016年09月05日 15:23
  • 1959

vs2010中Calendar控件的一些使用

一.返回指定日期前后的某一日期; // Sets a DateTime to April 3, 2002 of the Gregorian calendar.       DateTime m...
  • GoodShot
  • GoodShot
  • 2014年12月17日 11:40
  • 6330
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS脚本实现日历的控件效果
举报原因:
原因补充:

(最多只允许输入30个字)