`
mengnanleo
  • 浏览: 5842 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

简易纯JS日期控件

    博客分类：
  • JS
日历控件日历JShtml 
阅读更多

无聊，做了个纯JS的日期控件，JS动态生成CSS，可兼容大部分浏览器，直接JS引用即可使用，引用方式在JS最下面，可自行修改

 

猥琐的效果图_JS日历控件

JS日历控件

 

js源文件：

// JavaScript Document
(function(){
	var $=function(id){return document.getElementById(id);}
	var DateTime=function(obj,evs){
		if(!obj) return false;
		this.obj=obj;
		this.evs=evs?evs:null;
		this.id='datetime_by_mn_2011';
		this.date=isNaN(+new Date(this.obj.value.replace(/-/g,'/')))?new Date():new Date(this.obj.value.replace(/-/g,'/'));
		this.dayNum=42;
		this.year=this.date.getFullYear();
		this.month=this.date.getMonth();
		this.today=this.date.getDate();
		this.week=['日','一','二','三','四','五','六'];

		this._check=this.id+'_check';
		this._checkB=this.id+'_check_blur';
		this._year=this.id+'_year';
		this._yearPre=this.id+'_yearPre';
		this._yearNex=this.id+'_yearNex';
		this._yearMore=this.id+'_yearMore';
		this._month=this.id+'_month';
		this._monthPre=this.id+'_monthPre';
		this._monthNex=this.id+'_monthNex';
		this._monthMore=this.id+'_monthMore';
		this._newDays=this.id+'_newDays';
		this._today=this.id+'_today';
		this._close=this.id+'_close';
	}
	DateTime.prototype={
		init:function(){
			if(!this.obj) return false;
			this.createCss();
			this.createCheck();
			this.createDate();
			this.createFn();
		},
		formatNum:function(v){
			return (!isNaN(parseFloat(v))&&parseFloat(v)<10)?'0'+parseFloat(v):v;
		},
		offset:function(obj,event){
			var top=0,left=0,width=obj.offsetWidth||0,height=obj.offsetHeight||0,ev=window.event||event,outs;
			while(obj!= null){
				top+=obj.offsetTop||0;
				left+=obj.offsetLeft||0;
				obj=obj.offsetParent;
			}
			if(ev) outs=ev.clientX<left||ev.clientX>(left+width)||ev.clientY<top||ev.clientY>(top+height);
			return {top:top,left:left,width:width,height:height,out:outs};
		},
		createCheck:function(){
			if(!$(this._check)){
				var inp=document.createElement('input');
				inp.type='hidden';
				inp.id=this._check;
				document.body.appendChild(inp);
			}
		},
		createDate:function(){
			if(!$(this.id)){
				var dateDiv=document.createElement('div');
				dateDiv.id=this.id;
				dateDiv.style.display='none';
				dateDiv.innerHTML=this.createHead();
				dateDiv.innerHTML+=this.createWeek();
				dateDiv.innerHTML+='<ul id="'+this._newDays+'">'+this.createDays()+'</ul>';
				dateDiv.innerHTML+=this.createFoot();
				document.body.appendChild(dateDiv);
				dateDiv.style.cssText='';
			}
		},
		createHead:function(){
			var text='<ul>';
			text+='<li class="change"><a href="javascript:;" id="'+this._yearPre+'">&lt;&lt;</a></li>';
			text+='<li class="change"><a href="javascript:;" id="'+this._monthPre+'">&lt;</a></li>';
			text+='<li class="sel_time"><a href="javascript:;" id="'+this._year+'">'+this.date.getFullYear()+'</a>'+this.createMore('year')+'</li>';
			text+='<li class="sel_time"><a href="javascript:;" id="'+this._month+'">'+this.formatNum((this.date.getMonth()+1))+'</a>'+this.createMore('month')+'</li>';
			text+='<li class="change"><a href="javascript:;" id="'+this._monthNex+'">&gt;</a></li>';
			text+='<li class="change"><a href="javascript:;" id="'+this._yearNex+'">&gt;&gt;</a></li>';
			text+='</ul>';
			return text;
		},
		createMore:function(YM){
			var text='';
			if(YM=='year'){
				text+='<ul id="'+this._yearMore+'" class="sel_more">';
				for(var i=1900;i<=this.year+20;i++){
					text+='<li><a href="javascript:;">'+i+'</a></li>';
				}
			}else{
				text+='<ul id="'+this._monthMore+'" class="sel_more">';
				for(var i=1;i<13;i++){
					text+='<li><a href="javascript:;">'+this.formatNum(i)+'</a></li>';
				}
			}
			text+='</ul>';
			return text;
		},
		createWeek:function(){
			var text='<ul class="week">',style='';
			for(var i in this.week){
				style=(i==0||i==6)?' class="bg"':'';
				text+='<li'+style+'>'+this.week[i]+'</li>';
			}
			text+='</ul>'
			return text;
		},
		createDays:function(){
			this.date.setDate(1);
			var text='',dayOn='',YMOn=(this.date.getFullYear()==this.year&&this.date.getMonth()==this.month)?' class="on"':'',num=0;
			for(var i=0,l=this.date.getDay();i<l;i++){
				text+='<li></li>';
				num++;
			}
			for(var d=1,ds=this.checkDays();d<=ds;d++){
				dayOn=(d==this.today)?YMOn:'';
				text+='<li'+dayOn+'><a href="javascript:;">'+d+'</a></li>';
				num++;
			}
			for(var c=0,cn=this.dayNum-num;c<cn;c++){text+='<li></li>'}
			return text;
		},
		checkDays:function(){
			var days=(this.date.getMonth()==3||this.date.getMonth()==5||this.date.getMonth()==8||this.date.getMonth()==10)?30:(this.date.getMonth()==1)?(this.date.getFullYear()%4!=0)?28:29:31;
			return days;
		},
		createFoot:function(){
			var text='<ul class="bg">',
			date=new Date();
			text+='<li class="today"><a href="javascript:;" id="'+this.id+'_today">今天 '+date.getFullYear()+'-'+this.formatNum(date.getMonth()+1)+'-'+this.formatNum(date.getDate())+'</a></li>';
			text+='<li><a href="javascript:;" id="'+this._close+'">&times;</a></li>';
			text+='</ul>';
			return text;
		},
		createCss:function(){
			if(!$(this.id+'_check')){
				var css,style='';
				style+='#'+this.id+'{width:210px; background:#fff; border:1px solid #0CF; font-size:12px; line-height:20px; position:absolute; text-align:center; top:'+(this.offset(this.obj).top+this.offset(this.obj).height)+'px; left:'+this.offset(this.obj).left+'px; z-index:9999;}';
				style+='#'+this.id+' a{width:100%; height:20px; color:#000; display:block; outline:none; text-decoration:none;}';
				style+='#'+this.id+' a:hover{background:#d9fafc;}';
				style+='#'+this.id+' ul{clear:both; margin:0; padding:0;}';
				style+='#'+this.id+' li{width:30px; height:20px; list-style:none; float:left;}';
				style+='#'+this.id+' li.on{background:#ebfeff;}';
				style+='#'+this.id+' .bg li{background:#fbfbfb;}';
				style+='#'+this.id+' .change{width:20px;}';
				style+='#'+this.id+' .sel_time{width:65px; position:relative;}';
				style+='#'+this.id+' .sel_more{width:63px; height:120px; background:#fff; border:1px solid #0FF; display:none; position:absolute; top:0px; left:0px; overflow:auto; overflow-x:hidden;}';
				style+='#'+this.id+' .sel_more li{width:100%; background:#FFF;}';
				style+='#'+this.id+' .sel_more a.on{background:#ebfeff;}';
				style+='* html #'+this.id+' .sel_more li{width:80%;}';
				style+='#'+this.id+' .week li{background:#d9fafc; font-weight:bold;}';
				style+='#'+this.id+' .week li.bg{background:#fdfdde;}';
				style+='#'+this.id+' .today{width:180px;}';
				if(!-[1,]){
					css=document.createStyleSheet();
					css.cssText=style;
				}else{
					css=document.createElement('style');
					css.type='text/css';
					css.innerHTML=style;
					document.getElementsByTagName("head")[0].appendChild(css); 
				}
			}
		},
		createFn:function(){
			if(!$(this.id)) return false;
			var _method=this;
			this.chooseYM('year');
			this.chooseYM('month');
			$(this._today).onclick=function(){
				_method.obj.value=this.innerHTML.replace('今天 ','');
				_method.removeDate();
			}
			$(this._close).onclick=function(){
				_method.removeDate();
			}
			$(this._newDays).onclick=function(event){
				var ev=window.event||event;
				ev=ev.target||ev.srcElement;
				if(ev.tagName!='A') return false;
				_method.obj.value=$(_method._year).innerHTML+'-'+$(_method._month).innerHTML+'-'+_method.formatNum(ev.innerHTML);
				_method.removeDate();
			}
			document.onclick=function(e){
				if(!$(_method.id)) return false;
				var dateDivMap=_method.offset($(_method.id),e).out,
				objMap=_method.offset(_method.obj,e).out,
				evsMap=!_method.evs?true:_method.offset(_method.evs,e).out;

				if(dateDivMap&&objMap&&evsMap) _method.removeDate();
			}
		},
		chooseYM:function(YM){
			var _method=this,
			nows=YM=='year'?this._year:this._month,
			nowPre=YM=='year'?this._yearPre:this._monthPre,
			nowNex=YM=='year'?this._yearNex:this._monthNex,
			nowMore=YM=='year'?this._yearMore:this._monthMore;
			$(nows).onclick=function(){
				$(_method._yearMore).style.display='none';
				$(_method._monthMore).style.display='none';
				$(nowMore).style.display='block';
				var moreA=$(nowMore).getElementsByTagName('a');
				for(var i=0,l=moreA.length;i<l;i++){
					if(moreA[i].innerHTML==$(nows).innerHTML){
						$(nowMore).scrollTop=i*20;
						moreA[i].className='on';
					}else{
						moreA[i].className='';
					}
				}
			}
			$(nowMore).onmouseout=function(e){
				var moreMap=_method.offset(this,e).out;
				if(moreMap) this.style.display='none';
			}
			$(nowMore).onclick=function(event){
				var ev=window.event||event;
				ev=ev.target||ev.srcElement;
				$(nows).innerHTML=ev.innerHTML;
				_method.newDays();
				this.style.display='none';
			}
			$(nowPre).onclick=function(){
				if(YM=='month'){
					if(parseFloat($(nows).innerHTML)==1){
						$(nows).innerHTML=13;
						$(_method._year).innerHTML=parseFloat($(_method._year).innerHTML)-1;
					}
				}
				$(nows).innerHTML=_method.formatNum(parseFloat($(nows).innerHTML)-1);
				_method.newDays();
				this.blur();
			}
			$(nowNex).onclick=function(){
				if(YM=='month'){
					var month=parseFloat($(nows).innerHTML)+1;
					if(parseFloat($(nows).innerHTML)==12){
						$(nows).innerHTML=0;
						$(_method._year).innerHTML=parseFloat($(_method._year).innerHTML)+1;
					}
				}
				$(nows).innerHTML=_method.formatNum(parseFloat($(nows).innerHTML)+1);
				_method.newDays();
				this.blur();
			}
		},
		newDays:function(){
			this.date.setFullYear(parseFloat($(this._year).innerHTML));
			this.date.setMonth(parseFloat($(this._month).innerHTML)-1);
			$(this.id+'_newDays').innerHTML=this.createDays();
		},
		removeDate:function(){
			if($(this.id)) document.body.removeChild($(this.id));
		}
	}
	var onloads=function(){
		if($('dateTime_va')){
			if($('dateTime_ck')){
				$('dateTime_ck').onclick=function(){dateTime($('dateTime_va'),this);};
			}else{
				$('dateTime_va').onclick=function(){dateTime(this);};
			}
		}
	}
	if(document.addEventListener){
		window.addEventListener('load',onloads, false);
	}else{
		window.attachEvent('onload',onloads);
	}
	window.dateTime=function(obj,evs){
		new DateTime(obj,evs).init();
	}
})()
 

 

html测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日历</title>
<script type="text/javascript" src="date.js"></script>
</head>

<body>
<input type="text" id="dateTime_va">
<!--<input type="button" id="dateTime_ck" value="times" />-->
<input type="button" value="times" onclick="dateTime(document.getElementById('dateTime_va'),this)" />

</body>
</html>
 

 

0
顶
1
踩
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    一个简单好用的JS时间控件

    "一个简单好用的JS时间控件"可能是一个自定义的JavaScript组件，设计用于创建这样的交互式时间选择器。 描述中的“可惜不是每个浏览器都兼容”揭示了JS时间控件面临的一个常见问题——浏览器兼容性。JavaScript代码...

    js 简易的日历控件

    这个“js简易的日历控件”压缩包可能包含HTML、CSS和JavaScript文件，分别用于结构、样式和行为的定义。通过分析这些文件，你可以学习到如何将上述知识点整合到一个实际项目中，从而提升你的前端开发技能。在实际...

    asp日期控件演示及源码

    【ASP日期控件】在ASP（Active Server Pages）开发中，日期控件是常见的交互元素，用于用户输入或选择日期。此类控件可以提供友好的界面，帮助用户以日历形式选择日期，而不是传统的文本框输入，从而提高用户体验并...

    一个非常好用的日期控件 功能强 使用简单 界面美观

    My97 DatePicker 是一款流行的JavaScript日期选择插件，由My97 Design开发，专为网页应用设计。它以其高效、灵活和自定义性强的特点而受到开发者们的喜爱。下面将从几个关键方面详细介绍这个控件的功能和使用方法。 ...

    js 简易的日历控件.zip

    在JavaScript编程中，日历控件是一种常见的交互元素，它允许用户方便地选择日期，...而这个“js简易的日历控件”提供了一个很好的实践平台，可以从中学到如何用JavaScript来控制页面元素，处理日期，以及响应用户交互。

    简易的日历控件

    在IT行业中，日历控件是一种常见的用户界面元素，它允许用户方便地查看和操作日期。这个名为“简易的日历控件”的主题涉及到构建和使用简单、直观的日历UI组件的技术。下面我们将深入探讨相关知识点。 1. **日历...

    简易日期选择器（JS版）

    【简易日期选择器（JS版）】是一款JavaScript实现的日期选择工具，专为网页应用设计，具有良好的浏览器兼容性，支持古老的Internet Explorer 6和7，以及Firefox 3.1900年至2099年的日期范围。该日期选择器提供了一套...

    JS学习之一个简易的日历控件

    ### JS学习之一个简易的日历控件 #### 概述 本文主要介绍如何利用JavaScript创建一个简单的日历控件，并详细解析其实现思路和技术要点。该控件具有一定的灵活性和可配置性，能够满足基本的日历展示需求。 #### 可...

    jQ+HTML5实现清新简易带日期区间的日期选择插件.zip

    一般来说，这可能会包括如何在页面中引入jQuery库、插件的JavaScript和CSS文件，以及如何通过JavaScript代码初始化插件并配置其选项，如默认日期、日期格式等。 而132687031535266097.js（或可能是...

    jQuery控件简易日历表格代码.zip

    《jQuery控件简易日历表格代码详解》 在网页开发中，日历控件是一种常见的交互元素，用于用户选择日期，常应用于表单输入、事件安排等场景。jQuery作为一款强大的JavaScript库，提供了丰富的插件和扩展，使得创建...

    js jsp 时间控件

    根据给定的信息，“js jsp 时间控件”，我们可以推断出这段代码是在JavaScript与JSP技术结合下实现的一个简易的时间选择器。为了更好地理解和总结这段代码中的知识点，我们将从以下几个方面进行详细的阐述： ### 一...

    很简单也很实用的js_日历控件

    【标题】"很简单也很实用的js_日历控件"是一个专门为网页开发者设计的JavaScript组件，旨在提供一种直观、易用的日历展示功能。在网页交互中，日历控件通常用于日期选择，如预约系统、事件安排或者数据输入等场景，...

    轻量级日历开发控件(C#版)

    总结起来，【轻量级日历开发控件(C#版)】是一款面向C#开发者的高效日历解决方案，它以其小巧的体积、简易的API和广泛的兼容性，成为构建日期管理功能的理想选择，尤其是在需要快速开发和优化性能的项目中。...

    jQuery控件简易日历表格代码兼容firefox、chrome、ie.zip

    【jQuery控件简易日历表格代码兼容性解析】 在网页开发中，jQuery库因其简洁的API和广泛的浏览器兼容性而深受开发者喜爱。标题中的“jQuery控件简易日历表格代码兼容firefox、chrome、ie.zip”指出，这个压缩包提供...

    jQuery简易的日历插件下载.zip

    首先，jQuery简易日历插件是基于JavaScript库jQuery构建的，它利用jQuery的高效特性和丰富的API来创建交互式的日历组件。jQuery的核心优势在于它的选择器机制，能够方便地选取HTML元素，以及它提供的方法如`.on()`...

    Cron表达式选择器JS插件

    **Cron表达式选择器JS插件**是一种用于在Web应用程序中方便地创建和管理Cron表达式的JavaScript组件。Cron表达式是Unix系统中的一种时间调度语法，用于定义任务的执行计划。这个JS插件结合了BootStrap的样式，提供了...

    轻量级的原生js日历插件calendar.js使用指南.docx

    - "JS 学习之一个简易的日历控件" - "Vue.js 创建 Calendar 日历效果" - "JS 日历 推荐纯 js 简洁日历实现代码" - "js 日历控件（可精确到分钟）" - "php+javascript 的日历控件" - "js+html 制作简洁日历的方法" - ...

    日期下拉函数及案例

    本案例中，我们有一个使用HTML和JavaScript编写的简易日历程序，它实现了下拉选择日期的功能。这个功能在许多场景下都非常实用，比如在填写表单时输入出生日期或者预约日期等。 首先，我们要理解HTML是网页的基础...

    简易人事管理系统

    开发者可能利用ASP.NET的控件如文本框、按钮、表格等来设计用户交互界面，并通过代码处理用户的输入和数据操作。 该系统的核心功能可能包括员工信息管理、部门管理、考勤记录、薪资计算等。在员工信息管理部分，...

Magicbox
Global site tag (gtag.js) - Google Analytics