最简洁的日历控件(原创)

原创 2007年10月09日 23:45:00

 这是段专心看看JS,对日历控件颇有兴趣.
写了一个JS日历控件,本人认为是挺简洁的,供初学者参考.

date.js

//author:Qin Hao
//createDate:2007-09-28
function draw(obj)
{
  this.year    =  new Date().getFullYear();//取得年份
  this.month   =  new Date().getMonth();//取得月份
  this.date    =  new Date().getDate();//取得日期
  this.result  =  "";
  this.fday    =  "";
  this.fdate   =  "";
  this.ldate   =  "";
  this.x=0;
  this.y=0;
  this.obj=obj;
  this.YearSt  = 1950;
  this.YearEnd = 2050;
  this.createTable(1);
}
draw.prototype.createTable=function(IsDiv)
{
  this.fday=new Date(this.year,this.month,1).getDay();
  this.fdate=1-this.fday;
  this.ldate=new Date(this.year,this.month+1,0).getDate();
  var str="";
  if(IsDiv==1)
  {
    var str="<div style='height:0px; width:0px; border:2 px; z-index:500; position:absolute;left:0px; top: 0px; z-index:5000; display:none' id='Div' >";
  }
  str+="<table style="+this.style+">";
  str+="<tr>";
  //显示年份的下拉框
  str+="<td  style=font-size: 12px;color: #000000;line-height: 150%;>";
  str+="<select id=ddlYear onchange='YYchange();' style=margin:-2px>";
  for(var i=this.YearSt;i <= this.YearEnd;i ++)
   {
     str+="<option value=" + i + ">"+ i+ "年</option>";
   }
  str+="</select>";
  str+="</td>";
  //显示月份的下拉框
  str+="<td style=font-size: 12px;color: #000000;line-height: 150%;>";
  str+="<select id=ddlMonth onchange='MMchange();' style=margin:-2px>";
  for(var i=1;i <= 12;i ++)
   {
     str+="<option value=" + (i-1) + ">"+ i+ "月</option>";
   }
  str+="</select>";
  str+="</td>";
  str+="</tr>";
  str+="</table>";
  //显示年份,月份调节按钮
  str+="<table>";
  str+="<tr align=center>";
  str+="<td  style='font-size: 12px;color: #000000;line-height: 150%;'>&nbsp&nbsp&nbsp&nbsp</td>";
  str+="<td  style='font-size: 12px;color: #000000;line-height: 150%;cursor:hand' id=preYear onclick=perYear()>▲</td>";
  str+="<td  style='font-size: 12px;color: #000000;line-height: 150%;'>年</td>";
  str+="<td  style='font-size: 12px;color: #000000;line-height: 150%;cursor:hand 'id=nextYear onclick=nextYear()>▼</td>";
  str+="<td  style='font-size: 12px;color: #000000;line-height: 150%;cursor:hand' id=showm></td>";
  str+="<td  style='font-size: 12px;color: #000000;line-height: 150%;cursor:hand' id=preMonth onclick=preMonth()>▲</td>";
  str+="<td  style='font-size: 12px;color: #000000;line-height: 150%;'>月</td>";
  str+="<td  style='font-size: 12px;color: #000000;line-height: 150%;cursor:hand' id=nextMonth onclick=nextMonth()>▼</td>";
  str+="<td  style='font-size: 12px;color: #000000;line-height: 150%;cursor:hand' id=shown></td>";
  str+="</tr>";
  str+="</table>";
  //显示星期表头
  str+= "<table border='1' >";
  str+= "<tr>";
  str+= "<td  style='font-size: 12px;color: #000000;line-height: 150%;'>日</td><td  style='font-size: 12px;color: #000000;line-height: 150%;'>一</td><td  style='font-size: 12px;color: #000000;line-height: 150%;'>二</td><td  style='font-size: 12px;color: #000000;line-height: 150%;'>三</td><td  style='font-size: 12px;color: #000000;line-height: 150%;'>四</td><td  style='font-size: 12px;color: #000000;line-height: 150%;'>五</td><td  style='font-size: 12px;color: #000000;line-height: 150%;'>六</td>";
  str+= "</tr>";
  str+= "</table>";
  //显示日期
  str+="<table border='1'style=background-color:#CCCCCC;>";
  for(var i=1,j=this.fdate;i<7;i++)
  {
    str+="<tr>";
      for(var k=0;k<7;k++)
      {
         if(this.isdate(j)=="")
         {
           str+="<td  style='font-size: 12px;color: #000000;line-height: 150%;";
         }
         else
         {
           str+="<td d='"+this.year+"-"+(parseInt(this.month)+1).toString()+"-"+this.isdate(j)+"' onclick='getdate(d)'   style='font-size: 12px;color: #000000;line-height: 150%;";
         }
        if(j==this.date)
        {
          str+="BACKGROUND-COLOR:#60a0d5;COLOR: white;CURSOR: hand;'>"//将当前日期设背景颜色
        }
        else
        {
          str+="CURSOR: hand;'>"
        }
        str+=this.isdate(j++);
        str+="</td>";
      }
    str+="</tr>";
  }
  str+="</table>";
  str+="<table>"
  str+="<tr>";
  str+="<td  style=font-size: 12px;color: #000000;line-height: 150%;>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</td>";
  str+="<td onclick=hide()  style='font-size: 12px;color: #000000;line-height: 150%;CURSOR: hand;'>"
  str+="关闭";
  str+="</td>";
  str+="<td onclick=Clear()  style='font-size: 12px;color: #000000;line-height: 150%;CURSOR: hand;'>"
  str+="清空";
  str+="</td>";
  str+="</tr>"
  str+="</table>";
 
    if(IsDiv==1)
    {
       str+="</div>";
    }
  this.result=str;

}
//查验日期的范围
draw.prototype.isdate=function(n)
{
// return (n>=1&&n<=ldate)?n:"";
    if  (n>=1&&n<=this.ldate)
      {
         return n;
      }          
    else
      {
        return "";
      } 
}
var date=new draw();
date.createTable(1);
document.write(date.result);
show();

//年、月下拉框显示当前选中的年、月份
function show()
{
  var ddlYear   = document.getElementById("ddlYear");
  var ddlMonth  = document.getElementById("ddlMonth")
  ddlYear.value=date.year;
  ddlMonth.value=date.month;
}
//月下拉框改变事件
function MMchange()
{
    var ddlMonth=document.getElementById("ddlMonth");
    date.month=ddlMonth.value;
    date.createTable();
    var div=document.getElementById("Div");
    div.innerHTML=date.result;
    show();
}
//年下拉框改变事件
function YYchange()
{
    var ddlYear=document.getElementById("ddlYear");
    var div=document.getElementById("Div");
    date.year=ddlYear.value;
    date.createTable();
    div.innerHTML=date.result;
    show();
}
//上一年事件
function perYear()
{
  if(date.year!=date.YearSt)
   {
     date.year--;
      date.createTable();
      var div=document.getElementById("Div");
      div.innerHTML=date.result;
      show();
   }
}
//下一年事件
function nextYear()
{
  if(date.year!=date.YearEnd)
   {
     date.year++;
      date.createTable();
      var div=document.getElementById("Div");
      div.innerHTML=date.result;
      show();
   }
}
//上一月事件
function preMonth()
{

 if(date.month!=0)
  {
    date.month--;
     date.createTable();
     var div=document.getElementById("Div");
     div.innerHTML=date.result;
     show();
   }
}
//下一月事件
function nextMonth()
{
 if(date.month!=11)
  {
    date.month++;
     date.createTable();
     var div=document.getElementById("Div");
     div.innerHTML=date.result;
     show();
   }
}
//显示并定位
function showdate(oo)
{
    date.obj=oo;
    var div=document.getElementById("Div");
    div.style.display="block";
    div.style.left=window.event.x+"px";
    div.style.top=window.event.y+"px";
    CloseDiv();
}
//获取日期
function getdate(id)
 {
   (date.obj).value=id;
   var div=document.getElementById("Div");
   div.style.display="none";     
 }
 //隐藏
function hide()
 {
   var div=document.getElementById("Div");
   div.style.display="none";
 }
//清空
function Clear()
{
  date.obj.value = "";
  hide();
}
//当点击日期控件外,日期控件关闭。
    function CloseDiv()
    {
        var body=document;//.body;
        body.onclick=function()
        {
             var div=document.getElementById("Div");
             with(window.event.srcElement){
               if (id != date.obj.id&&id != "Div"&&id != "ddlYear"&&id != "ddlMonth"&&id != "preMonth"&&id != "perYear"&&id != "nextYear"&&id != "nextMonth")
                div.style.display="none";
              }
           
        }
    }

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script src="js/date.js" type="text/javascript" ></script>
<style type=text/css>
td
{
   font-size: 12px;
   color: #000000;
   line-height: 150%;
}
</style>
</head>


<body>
    <form id="form1" runat="server">
        <input type="text" readonly onclick=" showdate(this);"      />
       
    </form>
</body>
</html>

 

简洁JS 日历控件 支持日期和月份选择

以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题。现在只提供两种风格(简洁版和古典版)和两种语言(英...
  • feixia_24
  • feixia_24
  • 2014年11月27日 17:35
  • 1901

轻量级的日历控件(适合移动端)

图片展示 图1. 主图样式 1.       蓝色字体是当前日期;蓝色圆圈背景是选中的日期; 2.       上方的箭头是切换月份; 3.       日期那边可以左右滑动,...
  • huoIMeng
  • huoIMeng
  • 2014年11月26日 15:39
  • 1476

[Android]自定义简易版日历控件

先来看看效果图,看看是不是各位大佬想要的: 特别的功能并不多,重点是讲解简易日历该如何构造,假若是项目着急要用的话,最好还是找一下其它人写好的日历(附加滑动改变日历日期等功能) ---------...
  • u011596810
  • u011596810
  • 2016年04月01日 15:13
  • 2286

C#带复选框的日历控件,本人原创(二)

该本本已经升级成用户控件了,只要添加在工具箱,直接拉出来设置两个属性就能使用了。具体如下图:   1.控件添加到工具箱   2.控件添加到界面   3.控件暴露的3个属性,第一个是...
  • yangyuanlife
  • yangyuanlife
  • 2012年01月16日 23:39
  • 1019

基于jQuery的日历控件【原创】

接着上篇说,什么控件拉?就是基于jQuery强大的函数库的应用嘛! 真的是太方便了!福音啊!从此不再需要使用傻乎乎的.net自带日历控件了。 上代码: 无标题文档 $(fun...
  • freshbaby
  • freshbaby
  • 2013年08月14日 12:27
  • 464

默写js日历控件和详细注释(非原创 原作者:@author KimSoft (jinqinghua [at] gmail.com)

一直对日历控件很感兴趣,感觉很深奥的东西,最近也在努力学习js,看了几本js的经典入门书籍,看完就忘了,就想着看了看 其他大牛写得日历控件,看完了自己尝试着按照他们的思路写了一个,基本算是默背下来的...
  • longvs
  • longvs
  • 2013年09月08日 23:49
  • 1103

简洁JS 日历控件 支持日期和月份选择(转)

以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题。现在只提供两种风格(简洁版和古典版)和两种语言(英文...
  • wys3688
  • wys3688
  • 2013年07月05日 09:22
  • 1213

一款简洁漂亮的日历控件

  • 2012年04月27日 09:46
  • 35KB
  • 下载

原创日历Jquery插件

  • 2013年03月19日 13:27
  • 65KB
  • 下载

Windows下搭建git服务器,简洁版,服务器端msysgit加copssh,客户端msysgit(原创)

Windows下搭建git服务器,简洁版解决方案,服务器端msysgit加copssh,客户端msysgit。...
  • u013372377
  • u013372377
  • 2015年09月18日 10:27
  • 1038
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:最简洁的日历控件(原创)
举报原因:
原因补充:

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