狼山资源网

利用JS实现简单的日期选择插件
网络编程 2024/11/15 佚名
3 2

首先是调用方法如下

//调用方法，后面回调函数返回的是当前选择的日期 
calender('#calend').init(function(date){ 
 this.innerHTML = date 
});
//具体参数说明 
//如果需要传入参数，第一个为json，第二个为回调函数 
//下面是format格式化显示格式类型，有如下几种： 
//yyyy为年数  
//大写M为月数  
//d为几号  
//h为小时  
//小写m为分钟  
//s为秒数  
//q为季度  
//小写e，为数字星期格式  
//大写E，为中文星期格式  
//举例：'yyyy年MM月dd日','yyyy-MM-dd','yyyy','MM','e','dd E' 
//注意：以上获取时间如果是个位数则返回个位数，比如7月，则返回7，如果需要返回07，参数可以写成这样“MM”，其它同理，由于时分秒功能还没有添加，默认获取当前时分秒  
calender('#calend').init({ 
 date : [2015,12,12], //设置默认显示年月日，默认当前年月日  
 format : 'yyyy-MM-dd', //设置显示格式 
 button : false //是否显示按钮 
 left : 0, //追加left，默认0
 top :0, //追加top，默认0
 onload : function(){ } //初始化完成执行，this为当前创建的日历对象 
},function(date){ 
 //回调函数 
 this.innerHTML = date 
});

主要css样式

.containter {
	width:320px;
	margin:auto
}
.calender-wrap {
	-webkit-animation:clafade .3s ease;
	-moz-animation:clafade .3s ease;
	animation:clafade .3s ease;
	padding:5px;
	background:#fff;
	width:240px;
	box-shadow:0 5px 10px rgba(0,0,0,0.2);
	border-radius:4px;
	position:relative;
	font-family:"Microsoft yahei";
	position:absolute;
	z-index:1000
}
.calender-wrap {
	border:1px solid #e2e2e2
}
.calender-wrap:after {
	content:'';
	display:inline-block;
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-bottom:7px solid #eee;
	border-top:0;
	border-bottom-color:#d7d7d7;
	position:absolute;
	left:9px;
	top:-7px
}
.calender-wrap:before {
	content:'';
	display:inline-block;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-bottom:6px solid #ffffff;
	border-top:0;
	position:absolute;
	left:10px;
	top:-6px;
	z-index:10
}
.calender-caption {
	height:35px;
	border-bottom:1px solid #ddd;
	z-index:2;
	background:#eee
}
.calender-content {
	position:relative;
	overflow:hidden
}
.calender-content:after {
	content:'';
	display:block;
	clear:both
}
.calender-cell {
	cursor:pointer;
	float:left;
	width:14.28571428%;
	height:35px;
	text-align:center;
	line-height:35px;
	font-size:12px;
	color:#000;
	z-index:1;
	border-bottom:1px solid #eee
}
.calender-cell:hover {
	background:#eee
}
.calender-caption .calender-cell:hover {
	background:none
}
.calender-cell-dark {
	cursor:no-drop;
	color:#b9b9b9
}
.calender-caption .calender-cell {
	height:35px;
	line-height:35px;
	font-size:13px;
	color:#111;
	font-weight:bold
}
.calender-header {
	text-align:center;
	line-height:35px;
	text-align:center;
	color:#888;
	padding-bottom:4px;
	margin-bottom:1px;
	background:#fff;
	position:relative;
	border-bottom:1px solid #e6e6e6;
	font-size:14px
}
#calender-prev,#calender-next {
	text-decoration:none;
	display:block;
	width:14.2857%;
	height:35px;
	background:#fff;
	position:absolute;
	left:0%;
	top:0px;
	font-family:'宋体';
	font-size:14px;
	color:#555
}
#calender-prev,#calender-next {
	color:#999;
	font-size:16px
}
#calender-prev:hover,#calender-next:hover {
	background:#eee;
	border-radius:5px;
	color:#222
}
#calender-next {
	left:auto;
	right:0%
}
#calender-year,#calender-mon {
	cursor:pointer;
	padding:2px 4px;
	border-radius: 3px;
	margin:0 3px;
}
#calender-year:hover,#calender-mon:hover {
	background:#eee
}
.calender-list {
	overflow:hidden
}
.calender-list2,.calender-list3 {
	display:none
}
.calender-year-cell,.calender-mon-cell {
	width:32.41%;
	float:left;
	border-radius:4px;
	text-align:center;
	font-size:12px;
	padding:15px 0;
	border:1px solid #fff
}
.calender-year-cell:hover,.calender-mon-cell:hover {
	background:#eee;
	cursor:pointer
}
.calender-cell.active,.calender-year-cell.active,.calender-mon-cell.active {
	background:#23acf1;
	color:#fff
}
.calender-cell.active:hover,.calender-year-cell.active:hover,.calender-mon-cell.active:hover {
	background:#23acf1;
	color:#fff
}
.calender-button {
	border-top:1px solid #eee;
	width:100%;
	margin-top:-1px;
	padding:7px 0px 2px 0;
	overflow:hidden
}
.calender-button a {
	display:block;
	text-align:center;
	padding:0px 15px;
	height: 25px;
	line-height: 25px;
	float:right;
	background:#23acf1;
	color:#fff;
	margin-right:5px;
	cursor:pointer;
	margin-left:5px;
	font-size:12px;
	text-decoration:none
}
.calender-button a:hover {
	background:#0084c9
}
.calender-wrap.year .calender-list,.calender-wrap.month .calender-list {
	display:none
}
.calender-wrap.year .calender-list2 {
	display:block
}
.calender-wrap.month .calender-list3 {
	display:block
}
@keyframes clafade {
	0% {
	transform:scale(0.95);
	opacity:0
}
100% {
	transform:scale(1);
	opacity:1
}
}@-webkit-keyframes clafade {
	0% {
	-webkit-transform:scale(0.95);
	opacity:0
}
100% {
	-webkit-transform:scale(1);
	opacity:1
}
}	.calend {
	display: block;
	width: 180px;
	line-height: 28px;
	background: #222;
	color: #fff;
	padding: 5px 12px;
	margin:20px 20px 20px 0;
	font-size: 14px;
}

效果图一（默认参数）

利用JS实现简单的日期选择插件

效果图二（显示按钮，设置时间）

利用JS实现简单的日期选择插件

完整实例

<!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>
<style>
.containter {
	width:320px;
	margin:auto
}
.calender-wrap {
	-webkit-animation:clafade .3s ease;
	-moz-animation:clafade .3s ease;
	animation:clafade .3s ease;
	padding:5px;
	background:#fff;
	width:240px;
	box-shadow:0 5px 10px rgba(0,0,0,0.2);
	border-radius:4px;
	position:relative;
	font-family:"Microsoft yahei";
	position:absolute;
	z-index:1000
}
.calender-wrap {
	border:1px solid #e2e2e2
}
.calender-wrap:after {
	content:'';
	display:inline-block;
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-bottom:7px solid #eee;
	border-top:0;
	border-bottom-color:#d7d7d7;
	position:absolute;
	left:9px;
	top:-7px
}
.calender-wrap:before {
	content:'';
	display:inline-block;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-bottom:6px solid #ffffff;
	border-top:0;
	position:absolute;
	left:10px;
	top:-6px;
	z-index:10
}
.calender-caption {
	height:35px;
	border-bottom:1px solid #ddd;
	z-index:2;
	background:#eee
}
.calender-content {
	position:relative;
	overflow:hidden
}
.calender-content:after {
	content:'';
	display:block;
	clear:both
}
.calender-cell {
	cursor:pointer;
	float:left;
	width:14.28571428%;
	height:35px;
	text-align:center;
	line-height:35px;
	font-size:12px;
	color:#000;
	z-index:1;
	border-bottom:1px solid #eee
}
.calender-cell:hover {
	background:#eee
}
.calender-caption .calender-cell:hover {
	background:none
}
.calender-cell-dark {
	cursor:no-drop;
	color:#b9b9b9
}
.calender-caption .calender-cell {
	height:35px;
	line-height:35px;
	font-size:13px;
	color:#111;
	font-weight:bold
}
.calender-header {
	text-align:center;
	line-height:35px;
	text-align:center;
	color:#888;
	padding-bottom:4px;
	margin-bottom:1px;
	background:#fff;
	position:relative;
	border-bottom:1px solid #e6e6e6;
	font-size:14px
}
#calender-prev,#calender-next {
	text-decoration:none;
	display:block;
	width:14.2857%;
	height:35px;
	background:#fff;
	position:absolute;
	left:0%;
	top:0px;
	font-family:'宋体';
	font-size:14px;
	color:#555
}
#calender-prev,#calender-next {
	color:#999;
	font-size:16px
}
#calender-prev:hover,#calender-next:hover {
	background:#eee;
	border-radius:5px;
	color:#222
}
#calender-next {
	left:auto;
	right:0%
}
#calender-year,#calender-mon {
	cursor:pointer;
	padding:2px 4px;
	border-radius: 3px;
	margin:0 3px;
}
#calender-year:hover,#calender-mon:hover {
	background:#eee
}
.calender-list {
	overflow:hidden
}
.calender-list2,.calender-list3 {
	display:none
}
.calender-year-cell,.calender-mon-cell {
	width:32.41%;
	float:left;
	border-radius:4px;
	text-align:center;
	font-size:12px;
	padding:15px 0;
	border:1px solid #fff
}
.calender-year-cell:hover,.calender-mon-cell:hover {
	background:#eee;
	cursor:pointer
}
.calender-cell.active,.calender-year-cell.active,.calender-mon-cell.active {
	background:#23acf1;
	color:#fff
}
.calender-cell.active:hover,.calender-year-cell.active:hover,.calender-mon-cell.active:hover {
	background:#23acf1;
	color:#fff
}
.calender-button {
	border-top:1px solid #eee;
	width:100%;
	margin-top:-1px;
	padding:7px 0px 2px 0;
	overflow:hidden
}
.calender-button a {
	display:block;
	text-align:center;
	padding:0px 15px;
	height: 25px;
	line-height: 25px;
	float:right;
	background:#23acf1;
	color:#fff;
	margin-right:5px;
	cursor:pointer;
	margin-left:5px;
	font-size:12px;
	text-decoration:none
}
.calender-button a:hover {
	background:#0084c9
}
.calender-wrap.year .calender-list,.calender-wrap.month .calender-list {
	display:none
}
.calender-wrap.year .calender-list2 {
	display:block
}
.calender-wrap.month .calender-list3 {
	display:block
}
@keyframes clafade {
	0% {
	transform:scale(0.95);
	opacity:0
}
100% {
	transform:scale(1);
	opacity:1
}
}@-webkit-keyframes clafade {
	0% {
	-webkit-transform:scale(0.95);
	opacity:0
}
100% {
	-webkit-transform:scale(1);
	opacity:1
}
}	.calend {
	display: block;
	width: 180px;
	line-height: 28px;
	background: #222;
	color: #fff;
	padding: 5px 12px;
	margin:20px 20px 20px 0;
	font-size: 14px;
}
</style>

</head>

<body>

<div id="calend" class="calend">选择日期</div>
<div id="calend1" class="calend">选择日期</div>


<script>
window.calender = (function(win,doc){
	function C(str){
		this.dom = doc.querySelector(str);
		this.s = {
			date : [ new Date().getFullYear(),new Date().getMonth()+1,new Date().getDate()],
			button : false,
			format : 'yyyy年MM月dd日',
			left : 0,
			top: 0,
			onload : function(){}
		}
	};
	C.prototype = {
		init : function(){
			var t = this;
			if( typeof arguments[0] == 'function'){
	 		t.cb = arguments[0];
	 	}else{
	 		t.newS = arguments[0];
	 		t.cb = arguments[1] || function(){}
	 	};
	 	t.yoff = false;
	 	t.moff = false;
			t.extend(t.s,t.newS);
			t.nt = new Date();
			t.nt.setFullYear(t.s.date[0]);
		 	t.nt.setMonth(t.s.date[1]-1);
		 	var len = this.getDateLength(t.nt.getFullYear(),t.nt.getMonth() )
		 	t.nt.setDate(t.s.date[2]>len "calender-prev" "calender-prev" "calender-mon-cell '+( m == i ">'+ (i) +'</div>';
			};
			g('.calender-list3').innerHTML = html;
			var cells = doc.querySelectorAll('.calender-mon-cell');
			for(var i2 = 0;i2<cells.length;i2++){
			 	cells[i2].onclick = function(){
			 		t.moff = false
			 		t.del(g('.calender-wrap'),'month');
			 		t.nt.setDate(1)
					t.nt.setMonth(+this.innerHTML-1);
					t.createDay();
			 	}
			}
		},
		createYear : function(){
			var t= this,html='',y = (t.nt.getFullYear());
			var Year = g('#calender-year');
			for(var i = 0;i<9;i++){
				html+='<div class="calender-year-cell '+( (y-(4-i)) == y ">'+ (y-(4-i)) +'</div>';
			}
			Year.innerHTML = y
			g('.calender-list2').innerHTML = html;
			var cells = doc.querySelectorAll('.calender-year-cell');
			for(var i2 = 0;i2<cells.length;i2++){
			 	cells[i2].onclick = function(){
			 		t.yoff = false;
			 		t.del(g('.calender-wrap'),'year');
					t.nt.setFullYear(+this.innerHTML);
					t.createDay();
			 	}
			}
		},
		createDay : function(n){
			var t = this, 
				y = t.nt.getFullYear(),
				m = (t.nt.getMonth())+1;
			g('#calender-year').innerHTML = m===0 "calender-cell calender-cell-dark">' + (lastMonthLength - firstDay + i) + '</div>';
			}
			//循环输出当前月所有天
			for(i=1;i<length+1;i++){
				html += '<div data-n='+i+' class="calender-cell '+ (i == t.day ">' + i + '</div>';
			}
			//if(8-(length+firstDay)%7 !=8){
			for(i=1;i<= (41-(length+(firstDay==0 "calender-cell calender-cell-dark">' + i + '</div>';
			};
			doc.querySelector('.calender-content').innerHTML = html
		},
		create : function(){
			var t= this;
			if( g('.calender-wrap')) doc.body.removeChild( g('.calender-wrap') )
			var private_Day_title=['一','二','三','四','五','六','日'];
			//内容
			var html = '<div class="calender-wrap">';
			html +='<div id="calender-header" class="calender-header none-btn "><a id="calender-prev" href="javascript:;">&lt;</a><a id="calender-next" href="javascript:;">&gt;</a> <span id="calender-year">2016</span>年<span id="calender-mon">10</span>月</div>'
			//星期
			html += '<div class="calender-list"><div class="calender-caption">';
			for(i=0;i<7;i++){
				html += '<div class="calender-cell">' + private_Day_title[i] + '</div>';
			};
			html += '</div><div class="calender-content"></div>';
			if(this.s.button){
				html+='<div class="calender-button"><a href="javascript:;" class="calender-ent">确定</a><a href="javascript:;" class="calender-today">今天</a></div>';
			};
			html += '</div><div class="calender-list calender-list2"></div><div class="calender-list calender-list3"></div>'
			doc.body.insertAdjacentHTML("beforeend", html);
			var wrap = g('.calender-wrap');
			function setPosi(){
				var _top = doc.documentElement.scrollTop || doc.body.scrollTop;
				wrap.style.left = t.dom.getBoundingClientRect().left +t.s.left +'px';;
				wrap.style.top = t.dom.getBoundingClientRect().top + _top + t.dom.offsetHeight+t.s.top + 15 +'px';
			};
			setPosi();
			addEvent(window,'resize',function(){setPosi()})
			wrap.onclick = function(ev){
				var e = ev || event;
				e.stopPropagation "").substr(4 - RegExp.$1.length));
		 };
		 for(var k in o) { 
		  if(new RegExp('('+ k +')').test(format)) { 
		   format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ('00'+ o[k]).substr((''+ o[k]).length)); 
		  }; 
		 }; 
		 return format; 
	 },
	 extend : function(n,n1){
	  for(var i in n1){n[i] = n1[i]};
	 },
		has : function(o,n){
		 return new RegExp('\\b'+n+'\\b').test(o.className); 
	 },
		add : function(o,n){
		 if(!this.has(o, n)) o.className+=' '+n; 
	 },
		del : function(o,n){
		 if(this.has(o, n)){ 
		  o.className = o.className.replace(new RegExp('(?:^|\\s)'+n+'(?=\\s|$)'), '').replace(/^\s*|\s*$/g, ''); 
		 }; 
	 }
	};
	function g(str){return doc.querySelector(str)};
	function addEvent(obj,name,fn){obj.addEventListener? obj.addEventListener(name, fn, false):obj.attachEvent('on'+name,fn);};
 function two(num){return num<10 ? ('0'+num) : (''+num)};
	addEvent(doc,'click',function(){
		if( g('.calender-wrap')) doc.body.removeChild( g('.calender-wrap') )
	});
	function c(o){return new C(o)};return c;
})(window,document);

;(function(){
  calender('#calend').init(function(date){
 		this.innerHTML = date
	});
	calender('#calend1').init({format : 'yyyy-MM-dd',
    date : [2020,5,12],
		button : true
	},function(date){
		this.innerHTML = date
	});
})();

</script>


</body>
</html>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

标签：
js日期选择器插件,js,日期插件,点击选择,js,选择周,日期插件
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“利用JS实现简单的日期选择插件”

暂无“利用JS实现简单的日期选择插件”评论...
www.pvsay.com 狼山资源网
29,905影音资源
44,626技术资源
11,817软件资源
578,645站长资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
狼山资源网 Copyright www.pvsay.com