超级简单好用的JS日期控件

最新推荐文章于 2017-10-15 17:10:13 发布
最新推荐文章于 2017-10-15 17:10:13 发布
阅读量4.9k 收藏
点赞数
分类专栏： .net java 文章标签： function date null input button image
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qin87/article/details/1904698
版权

用的时候先在<head></head>插入

< SCRIPT  src ="Images/setday.js" ></ SCRIPT >

然后输入框

< INPUT  id ="starttime2"  onclick ="setday(this)"  size ="12"  name ="starttime"  runat ="server" >

setday.js代码如下：

 

< SCRIPT >
document.writeln( ' <div id=meizzDateLayer style="position: absolute; width: 142; height: 166; z-index: 9998; display: none">');
document.writeln( ' <span id=tmpSelectYearLayer  style="z-index: 9999;position: absolute;top: 2; left: 18;display: none"></span>');
document.writeln( ' <span id=tmpSelectMonthLayer style="z-index: 9999;position: absolute;top: 2; left: 75;display: none"></span>');
document.writeln( ' <table border=0 cellspacing=1 cellpadding=0 width=142 height=160 bgcolor=#000000 onselectstart="return false">');
document.writeln( '   <tr><td width=142 height=23 bgcolor=#FFFFFF><table border=0 cellspacing=1 cellpadding=0 width=140 height=23>');
document.writeln( '       <tr align=center><td width=20 align=center bgcolor=#808080 style="font-size:12px;cursor: hand;color: #FFD700" ');
document.writeln( '         οnclick="meizzPrevM()" title="前一月" Author=meizz><b Author=meizz>&lt;</b>');
document.writeln( '         </td><td width=100 align=center style="font-size:12px;cursor:default" Author=meizz>');

document.writeln( '         <span Author=meizz id=meizzYearHead οnmοuseοver="style.backgroundColor='yellow'" οnmοuseοut="style.backgroundColor='white'" title="点击这里选择年份" οnclick="tmpSelectYearInnerHTML(this.innerText)" style="cursor: hand;"></span>&nbsp;年&nbsp;<span');
document.writeln( '          id=meizzMonthHead Author=meizz οnmοuseοver="style.backgroundColor='yellow'" οnmοuseοut="style.backgroundColor='white'" title="点击这里选择月份" οnclick="tmpSelectMonthInnerHTML(this.innerText)" style="cursor: hand;"></span>&nbsp;月</td>');

document.writeln( '         <td width=20 bgcolor=#808080 align=center style="font-size:12px;cursor: hand;color: #FFD700" ');
document.writeln( '          οnclick="meizzNextM()" title="后一月" Author=meizz><b Author=meizz>&gt;</b></td></tr>');
document.writeln( '     </table></td></tr>');
document.writeln( '   <tr><td width=142 height=18 bgcolor=#808080>');
document.writeln( ' <table border=0 cellspacing=0 cellpadding=0 width=140 height=1 style="cursor:default">');
document.writeln( ' <tr align=center><td style="font-size:12px;color:#FFFFFF" Author=meizz>日</td>');
document.writeln( ' <td style="font-size:12px;color:#FFFFFF" Author=meizz class="td1">一</td><td style="font-size:12px;color:#FFFFFF" Author=meizz>二</td>');
document.writeln( ' <td style="font-size:12px;color:#FFFFFF" Author=meizz>三</td><td style="font-size:12px;color:#FFFFFF" Author=meizz>四</td>');
document.writeln( ' <td style="font-size:12px;color:#FFFFFF" Author=meizz>五</td><td style="font-size:12px;color:#FFFFFF" Author=meizz>六</td></tr>');
document.writeln( ' </table></td></tr><!-- Author:F.R.Huang(meizz) http://www.meizz.com/ mail: meizz@hzcnc.com 2002-10-8 -->');
document.writeln( '   <tr><td width=142 height=120>');
document.writeln( '     <table border=0 cellspacing=1 cellpadding=0 width=140 height=120 bgcolor=#FFFFFF>');
var n = 0 ;  for  (j = 0 ;j < 5 ;j ++ ){ document.writeln ( '  <tr align=center>'); for (i=0;i<7;i++){
document.writeln( ' <td width=20 height=20 id=meizzDay'+n+' style="font-size:12px" Author=meizz οnclick=meizzDayClick(this.innerText)></td>');n++;}
document.writeln( ' </tr>');}
document.writeln( '       <tr align=center><td width=20 height=20 style="font-size:12px" id=meizzDay35 Author=meizz ');
document.writeln( '          οnclick=meizzDayClick(this.innerText)></td>');
document.writeln( '         <td width=20 height=20 style="font-size:12px" id=meizzDay36 Author=meizz οnclick=meizzDayClick(this.innerText)></td>');
document.writeln( '         <td colspan=5 align=right Author=meizz><span οnclick=closeLayer() style="font-size:12px;cursor: hand"');
document.writeln( '          Author=meizz title="返回（不选择日期）"><u>关闭</u></span>&nbsp;</td></tr>');
document.writeln( '     </table></td></tr><tr><td>');
document.writeln( '         <table border=0 cellspacing=1 cellpadding=0 width=100% bgcolor=#FFFFFF>');
document.writeln( '           <tr><td Author=meizz align=left><input Author=meizz type=button value="<<" title="前一年" οnclick="meizzPrevY()" ');
document.writeln( '              οnfοcus="this.blur()" style="    cursor: hand;BACKGROUND-COLOR: #808080;BORDER-BOTTOM: #808080 1px outset; BORDER-LEFT: #808080 1px outset; BORDER-RIGHT: #808080 1px outset; BORDER-TOP: #808080 1px outset; FONT-SIZE: 12px; height: 20px;color: #FFD700; font-weight: bold"><input Author=meizz title="前一月" type=button ');
document.writeln( '              value="<" οnclick="meizzPrevM()" οnfοcus="this.blur()" style="cursor: hand;BACKGROUND-COLOR: #808080;BORDER-BOTTOM: #808080 1px outset; BORDER-LEFT: #808080 1px outset; BORDER-RIGHT: #808080 1px outset; BORDER-TOP: #808080 1px outset;font-size: 12px; height: 20px;color: #FFD700; font-weight: bold"></td><td ');
document.writeln( '              Author=meizz align=center><input Author=meizz type=button value="重置" οnclick="meizzToday()" ');
document.writeln( '              οnfοcus="this.blur()" title="显示当前时间" style="cursor: hand;BACKGROUND-COLOR: #808080;BORDER-BOTTOM: #808080 1px outset; BORDER-LEFT: #808080 1px outset; BORDER-RIGHT: #808080 1px outset; BORDER-TOP: #808080 1px outset;font-size: 12px; height: 20px;color: #FFFFFF; font-weight: bold"></td><td ');
document.writeln( '              Author=meizz align=right><input Author=meizz type=button value=">" οnclick="meizzNextM()" ');
document.writeln( '              οnfοcus="this.blur()" title="后一月" style="cursor: hand;BACKGROUND-COLOR: #808080;BORDER-BOTTOM: #808080 1px outset; BORDER-LEFT: #808080 1px outset; BORDER-RIGHT: #808080 1px outset; BORDER-TOP: #808080 1px outset;font-size: 12px; height: 20px;color: #FFD700; font-weight: bold"><input ');
document.writeln( '              Author=meizz type=button value=" >>" title="后一年" οnclick="meizzNextY()"');
document.writeln( '              οnfοcus="this.blur()" style="cursor: hand;BACKGROUND-COLOR: #808080;BORDER-BOTTOM: #808080 1px outset; BORDER-LEFT: #808080 1px outset; BORDER-RIGHT: #808080 1px outset; BORDER-TOP: #808080 1px outset;font-size: 12px; height: 20px;color: #FFD700; font-weight: bold"></td>');
document.writeln( ' </tr></table></td></tr></table></div>');


var outObject;
 function  setday(tt,obj)  // 主调函数
{
   if  (arguments.length  >    2 ){alert( " 对不起！传入本控件的参数太多！ " );return;}
   if  (arguments.length  ==   0 ){alert( " 对不起！您没有传回本控件任何参数！ " );return;}
  var dads   =  document.all.meizzDateLayer.style;var th  =  tt;
  var ttop   =  tt.offsetTop;      // TT控件的定位点高
  var thei   =  tt.clientHeight;   // TT控件本身的高
  var tleft  =  tt.offsetLeft;     // TT控件的定位点宽
  var ttyp   =  tt.type;           // TT控件的类型
   while  (tt  =  tt.offsetParent){ttop += tt.offsetTop; tleft += tt.offsetLeft;}
  dads.top   =  (ttyp == " image " )? ttop + thei : ttop + thei + 6 ;
  dads.left  =  tleft;
  outObject  =  (arguments.length  ==   1 ) ? th : obj;
  dads.display  =   ' ';
  event.returnValue = false ;
}

var MonHead  =   new   Array ( 12 );                // 定义阳历中每个月的最大天数
    MonHead[ 0 ]  =   31 ; MonHead[ 1 ]  =   28 ; MonHead[ 2 ]  =   31 ; MonHead[ 3 ]  =   30 ; MonHead[ 4 ]   =   31 ; MonHead[ 5 ]   =   30 ;
    MonHead[ 6 ]  =   31 ; MonHead[ 7 ]  =   31 ; MonHead[ 8 ]  =   30 ; MonHead[ 9 ]  =   31 ; MonHead[ 10 ]  =   30 ; MonHead[ 11 ]  =   31 ;

var meizzTheYear = new   Date ().getFullYear();  // 定义年的变量的初始值
var meizzTheMonth = new   Date ().getMonth() + 1 ;  // 定义月的变量的初始值
var meizzWDay = new   Array ( 37 );                // 定义写日期的数组

 function  document.onclick()  // 任意点击时关闭该控件
{ 
   with (window.event.srcElement)
  {  if  (tagName ! =   " INPUT "   &&  getAttribute( " Author " ) == null )
    document.all.meizzDateLayer.style.display = " none " ;
  }
}

 function  meizzWriteHead(yy,mm)   // 往 head 中写入当前的年与月
  { document.all.meizzYearHead.innerText   =  yy;
    document.all.meizzMonthHead.innerText  =  mm;
  }

 function  tmpSelectYearInnerHTML(strYear)  // 年份的下拉框
{
   if  (strYear.match( / D / )! = null ){alert( " 年份输入参数不是数字！ " );return;}
  var m  =  (strYear) ? strYear :  new   Date ().getFullYear();
   if  (m  <   1000  || m  >   9999 ) {alert( " 年份值不在 1000 到 9999 之间！ " );return;}
  var n  =  m  -   10 ;
   if  (n  <   1000 ) n  =   1000 ;
   if  (n  +   26   >   9999 ) n  =   9974 ;
  var s  =   " <select Author=meizz name=tmpSelectYear style='font-size: 12px'  "
     s  +=   " οnblur='document.all.tmpSelectYearLayer.style.display= " none " '  "
     s  +=   " οnchange='document.all.tmpSelectYearLayer.style.display= " none " ; "
     s  +=   " meizzTheYear = this.value; meizzSetDay(meizzTheYear,meizzTheMonth)'> " ;
  var selectInnerHTML  =  s;
   for  (var i  =  n; i  <  n  +   26 ; i ++ )
  {
     if  (i  ==  m)
       {selectInnerHTML  +=   " <option value=' "   +  i  +   " ' selected> "   +  i  +   " 年 "   +   " </option> " ;}
     else  {selectInnerHTML  +=   " <option value=' "   +  i  +   " '> "   +  i  +   " 年 "   +   " </option> " ;}
  }
  selectInnerHTML  +=   " </select> " ;
  document.all.tmpSelectYearLayer.style.display = "" ;
  document.all.tmpSelectYearLayer.innerHTML  =  selectInnerHTML;
  document.all.tmpSelectYear.focus();
}

 function  tmpSelectMonthInnerHTML(strMonth)  // 月份的下拉框
{
   if  (strMonth.match( / D / )! = null ){alert( " 月份输入参数不是数字！ " );return;}
  var m  =  (strMonth) ? strMonth :  new   Date ().getMonth()  +   1 ;
  var s  =   " <select Author=meizz name=tmpSelectMonth style='font-size: 12px'  "
     s  +=   " οnblur='document.all.tmpSelectMonthLayer.style.display= " none " '  "
     s  +=   " οnchange='document.all.tmpSelectMonthLayer.style.display= " none " ; "
     s  +=   " meizzTheMonth = this.value; meizzSetDay(meizzTheYear,meizzTheMonth)'> " ;
  var selectInnerHTML  =  s;
   for  (var i  =   1 ; i  <   13 ; i ++ )
  {
     if  (i  ==  m)
       {selectInnerHTML  +=   " <option value=' " + i + " ' selected> " + i + " 月 " + " </option> " ;}
     else  {selectInnerHTML  +=   " <option value=' " + i + " '> " + i + " 月 " + " </option> " ;}
  }
  selectInnerHTML  +=   " </select> " ;
  document.all.tmpSelectMonthLayer.style.display = "" ;
  document.all.tmpSelectMonthLayer.innerHTML  =  selectInnerHTML;
  document.all.tmpSelectMonth.focus();
}

 function  closeLayer()                // 这个层的关闭
  {
    document.all.meizzDateLayer.style.display = " none " ;
  }

 function  document.onkeydown()
  {
     if  (window.event.keyCode == 27 )document.all.meizzDateLayer.style.display = " none " ;
  }

 function  IsPinYear( year )             // 判断是否闰平年
  {
     if  ( 0 == year % 4 && (( year % 100 ! = 0 )||( year % 400 == 0 ))) return  true ; else  return  false ;
  }

 function  GetMonthCount( year , month )   // 闰年二月为29天
  {
    var c = MonHead[ month - 1 ]; if (( month == 2 ) && IsPinYear( year )) c ++ ;return c;
  }

 function  GetDOW( day , month , year )      // 求某天的星期几
  {
    var dt = new   Date ( year , month - 1 , day ).getDay() / 7 ; return dt;
  }

 function  meizzPrevY()   // 往前翻  Year
  {
     if (meizzTheYear  >   999   &&  meizzTheYear  < 10000 ){meizzTheYear -- ;}
     else {alert( " 年份超出范围（1000-9999）！ " );}
    meizzSetDay(meizzTheYear,meizzTheMonth);
  }
 function  meizzNextY()   // 往后翻  Year
  {
     if (meizzTheYear  >   999   &&  meizzTheYear  < 10000 ){meizzTheYear ++ ;}
     else {alert( " 年份超出范围（1000-9999）！ " );}
    meizzSetDay(meizzTheYear,meizzTheMonth);
  }
 function  meizzToday()   // Today Button
  {
    meizzTheYear  =   new   Date ().getFullYear();
    meizzTheMonth  =   new   Date ().getMonth() + 1 ;
    meizzSetDay(meizzTheYear,meizzTheMonth);
  }
 function  meizzPrevM()   // 往前翻月份
  {
     if (meizzTheMonth > 1 ){meizzTheMonth -- } else {meizzTheYear -- ;meizzTheMonth = 12 ;}
    meizzSetDay(meizzTheYear,meizzTheMonth);
  }
 function  meizzNextM()   // 往后翻月份
  {
     if (meizzTheMonth == 12 ){meizzTheYear ++ ;meizzTheMonth = 1 } else {meizzTheMonth ++ }
    meizzSetDay(meizzTheYear,meizzTheMonth);
  }

 function  meizzSetDay(yy,mm)    // 主要的写程序 **********
{
  meizzWriteHead(yy,mm);
   for  (var i  =   0 ; i  <   37 ; i ++ ){meizzWDay[i] = "" };   // 将显示框的内容全部清空
  var day1  =   1 ,firstday  =   new   Date (yy,mm - 1 , 1 ).getDay();   // 某月第一天的星期几
   for  (var i  =  firstday; day1  <  GetMonthCount(yy,mm) + 1 ; i ++ ){meizzWDay[i] = day1;day1 ++ ;}
   for  (var i  =   0 ; i  <   37 ; i ++ )
  { var da  =   eval ( " document.all.meizzDay " + i)      // 书写新的一个月的日期星期排列
     if  (meizzWDay[i]! = "" )
      { da.innerHTML  =   " <b> "   +  meizzWDay[i]  +   " </b> " ;
        da.style.backgroundColor  =  (yy  ==   new   Date ().getFullYear()  &&
        mm  ==   new   Date ().getMonth() + 1   &&  meizzWDay[i]  ==   new   Date ().getDate()) ?  " #FFD700 "  :  " #73a6de " ;
        da.style.cursor = " hand "
      }
     else {da.innerHTML = "" ;da.style.backgroundColor = "" ;da.style.cursor = " default " }
  }
}
 function  meizzDayClick(n)   // 点击显示框选取日期，主输入函数 *************
{
  var yy  =  meizzTheYear;
  var mm  =  meizzTheMonth;
   if  (mm  <   10 ){mm  =   " 0 "   +  mm;}
   if  (outObject)
  {
     if  (!n) {outObject.value = "" ; return;}
     if  ( n  <   10 ){n  =   " 0 "   +  n;}
    outObject.value =  yy  +   " - "   +  mm  +   " - "   +  n ;  // 注：在这里你可以输出改成你想要的格式
    closeLayer(); 
  }
   else  {closeLayer(); alert( " 您所要输出的控件对象并不存在！ " );}
}
meizzSetDay(meizzTheYear,meizzTheMonth);
 </ script >
简单实用的日期控件
03-23
NULL 博文链接：https://heikediguo.iteye.com/blog/1066469
原生JS实现一个日期选择器（DatePicker）组件
最新发布
fenfenfen520a的博客
01-16 51
这是通过原生HTML/CSS/JavaScript完成一个日期选择器（datepicker）组件，一个纯手搓的组件的开发。主要包括datepicker静态结构的编写、日历数据的计划获取、组件的渲染以及组件事件的处理。 根据调用时的时间格式参数，可以控制短日期格式或长日期格式。 实现效果（短日期格式）
js 经典日期控件
penghao122
04-01 195
/**//** *本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。 *tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。 *使用方法： * (1)只选择日期 * (2)选择日期和小时 * (3)选择日期和小时及分钟 *设置参数的方法 * (1)设置日期分隔符 setDa...
javascript的日期控件
积淀孕育创新 智慧创造价值
04-20 577
用的时候先在插入 然后输入框 当鼠标放在输入框的时候，出现时间控件，选取时间后，JS自动的将时间控件的值赋给starttime2。由于给starttime2加了 runat="server"属性，所以在后台可以取starttime2的Value值。setday.js下载 提供的setday.js默认是UTF-8编码，也就是VS的默认编码，如果你的页面声明是GB等其他编码，请用一下高
超好用js日期控件
11-02
这篇文档介绍了一个简单易用的JavaScript日期控件，适用于快速集成到项目中，通过修改后缀为.js并按照注释中的调用方法即可使用。 首先，该控件提供了多种选择模式，满足不同场景需求： 1. 只选择年份：用户点击...
超简洁的JS日期控件
03-22
通常，JavaScript日期控件会包含一系列函数，用于创建、显示和管理日期选择器，以及处理用户选择日期后的事件。开发者可以通过调用这些函数来在网页上生成日期输入字段，并为用户提供友好的交互界面。 描述中提到，...
超好用的JS日期控件 有示例链接
04-29
"超好用的JS日期控件"是专为前端开发者设计的一个高效且兼容性良好的工具，允许用户在网页上方便地选择日期。这款控件支持多种主流浏览器，包括Internet Explorer 6.0及更高版本、Firefox 2.0及更高版本、Chrome、...
好用的JS日期控件，简单实用
01-18
直接饮用js，触发onfocus事件，非常好用，界面也相当美观
js实现日期控件
热门推荐
玉案轩窗的博客
10-15 1万+
前言最近花了点时间写了个日期控件，首先说说写日期控件的初衷，有两点： 第一点是没有写过对于日期的生成不甚了解 工作中使用框架的日期控件，但是想要自己实现下该日期控件主要是学习使用，功能不多，支持输出天以及日期范围的选择。 实现思路日期控件实现了单日期以及日期范围的功能，单日期实现效果如下图： 日期范围实现效果图如下： 下面主要说说主要的实现思路，首先说说面板日期的生成，日期面板如下图： 日期面
JS日期控件
superstar162的专栏
11-24 1388
找了好久就发现这个还可以，忘了在哪找的了，我先把js源码放这了。------------------------------------------------------------------------------------------------------------------------------------// JScript 文件//  主调用函数是 setday(t
js日期控件
shuang60的专栏
06-20 900
 使用第一种 setday控件 当鼠标放在输入框的时候，出现时间控件，选取时间后，JS自动的将时间控件的值赋给starttime2。由于给starttime2加了 runat="server"属性，所以在后台可以取starttime2的Value值。第二中 //调用方法很简单 //参数顺续:起始年,结束,语言类别(0为中文,1为英文),日期格式        下载：
很好用得js日期控件
07-18
本人收集的好用的js日期控件，已经测试，非常好用，呵呵
非常好用的js日期控件
12-19
非常好用的js日期控件非常好用的js日期控件
超级简单好用的js时间控件
09-27
在这个"超级简单好用的js时间控件"中，我们可以期待找到一个轻量级且高效的解决方案，适用于那些希望在网站上添加时间选择功能的开发者。 首先，我们要理解JavaScript是如何处理时间的。JavaScript内置了`Date`对象...
一个不错的js时间日期控件
04-24
不错啊。你们看看，自己下了就知道了，0分 自己下了看看反正不要分的，一个js控件蛮好的，js里面自带提示如何操作
日期 时间js控件
01-21
代码如下:[removed] /**//** *本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。 *tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。 *使用方法： * (1)只选择日期 <input type=”text” name=”date” readOnly onClick=”setDay(this);”> * (2)选择日期和小时 <input type=”text” name=”dateh” readOnly onClick=”setDayH(this);”>
精心挑选12款优秀的 JavaScript 日历和时间选择插件
Tizian的专栏
10-16 1895
今天这篇文章向大家分享12款精心挑选的优秀 JavaScript 日历和时间选择插件，都带有详细的使用教程和效果演示。这些插件能够帮助 Web 开发人员更快速的实现各种精美的日历和时间选择效果。同时推荐阅读的博文中还有更多实现各种网站功能的 jQuery 优秀插件，欢迎大家可以去淘金。 1. The Coolest Calendar 界面非常漂亮的一款日期选择插件，有详细的使用文档，最
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值