文档章节

日期控件

酱哥哥
 酱哥哥
发布于 2014/06/27 10:28
字数 1793
阅读 138
收藏 5

之前从网上搜罗的日期控件,感觉非常实用,样式也很漂亮。但是因为在手机web上无法显示,所以无奈将其卸下,但是不想失去它,以后肯定会再次用到,也不用再去网上话费大量时间去寻找了。


/*------------------------补充------------------------*/

经过修改可以在手机上使用了,腾讯用的是IE的内核,我在chrome上测试是正常的,IE下不行。

点击时间文本框的时候,在IE下触发了三次对象的事件,在chrome下只触发两次。没有找到什么原因。已经在博客园发帖,待解决再来更新

http://q.cnblogs.com/q/63555/

谁知道请告诉我一下,谢谢。

针对那个问题,我是这么改的。因为我的文件里面包含了<input type="checkbox" /> 这个控件也被触发事件了。

在js 文件里面的事件绑定里面加上一条限制语句

bind : function () {
			var _this = this;
			if (!this.isShowOk){
				addEvent(document, 'click', function (e) {
					e = e || window.event;
					var t = e.target || e.srcElement;
					//添加
					if (t.tagName == "INPUT" && t.title == "") { return; }
					if (t.title != _this.n+'DatePicker') {
						_this.hide();
					}else{
						_this.show();
					}
				});
			}
		},

改过以后IE8,手机端,chrome上面均可正常。其他版本没有测试。下面的js 是原文件,可以自行测试是否可行,兼容性问题一般都会出在这个事件绑定上面,可自行修改添加。

/*-------------------------补充结束---------------------------*/


样式如下:




调用文件如下:

<link href="../../Css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/datepicker.js" type="text/javascript"></script

绑定控件如下:

 预计发货日期:<input type="text" name="dpstart<%#Eval("Id") %>" value="<%#Eval("PredictSendTime") %>"   id='dp_start_<%#Eval("Id") %>'>            
 预计到货日期:<input type="text" name="dpend<%#Eval("Id") %>" value="<%#Eval("DemandArrivalTime") %>"   id='dp_end_<%#Eval("Id") %>'>

调用方法如下:

 <script type="text/javascript">
               new DatePicker('_DatePicker1_<%#Eval("Id") %>', { inputId: 'dp_end_<%#Eval("Id") %>', className: 'date-picker-wp', seprator: '-' });
               new DatePicker('_DatePicker2_<%#Eval("Id") %>', { inputId: 'dp_start_<%#Eval("Id") %>', className: 'date-picker-wp', seprator: '-' });
</script>

该方法要放在“绑定控件”下面,初始化


调用文件代码如下:

datepicker.css

.date-picker-wp {position: absolute;background: #f1f1f1;left:0px;top:0px;border-top: 4px solid #3879d9;}
.date-picker-wp table {border: 1px solid #ddd; width:300px;}
.date-picker-wp td {background: #fafafa;height: 25px; width:30px; border: 1px solid #ccc;font-size: 12px;text-align: center;}
.date-picker-wp td.noborder {border: none;background: none;}
.date-picker-wp td a {color: #1c93c4;text-decoration: none;}
.date-picker-wp .time {width:20px;height:14px;line-height:14px;}
.strong {font-weight: bold}
.hand {cursor: pointer; color: #3879d9}
.current{color: red;font-weight:bold;}

datepicker.js

/****************************
 *原作者不知道是谁,好像是岑安,反正感谢
 *经过本人修改后可以直接在页面中显示,增加了小时,分钟的显示,增加(清除,今天,确定按钮),页面中显示,可以用php传时间,默认显示该值时间,
 *yolin    103765126
****************************/

var DatePicker = function () {
	var $ = function (i) {
			return document.getElementById(i)
		},//定义得到id对象
		addEvent = function (o, e, f) {
			o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})
		},//定义鼠标事件
		getPos = function (el) {
			for (var pos = {x:0, y:0}; el; el = el.offsetParent) {
				pos.x += el.offsetLeft;
				pos.y += el.offsetTop;
			}
			return pos;
		};//定义定位

	//初始化方法
	var init = function (n, config) {
			window[n] = this;
			Date.prototype._fd = function () {
				var d = new Date(this); 
				d.setDate(1);
				return d.getDay();
			};
			Date.prototype._fc = function () {
				var d1 = new Date(this), d2 = new Date(this);
				d1.setDate(1);
				d2.setDate(1);
				d2.setMonth(d2.getMonth()+1);
				return (d2-d1)/86400000;
			};
			this.n           = n;									//前缀
			this.config      = config;								//配置
			this.seprator    = this.config.seprator || '/',			//显示日期的连接符
			this.isCurrTime  = this.config.isCurrTime || false;		//默认显示给定的时间(false:默认显示当前时间)
			this.isShowTime  = this.config.isShowTime || false;		//显示时间默认不显示时间
			this.isShowMenu  = this.config.isShowMenu || false;		//显示菜单按钮默认不显示
			this.isShowOk    = this.config.isShowOk || false;		//页面直接显示默认input点击
			this.isCallBack  = this.config.isCallBack || false;		//页面直接显示点击日期后的回调函数
			this.isBodyBox   = this.config.isBodyBox || false;		//与isShowOk一同使用,false:在body下创建子节点,true:在指定inputId下创建节点
			this.D           = new Date;
			this.curdatetime = this.D.getFullYear()+this.seprator+(this.D.getMonth()+1)+this.seprator+this.D.getDate();	//当前时间
			this.el          = $(config.inputId);
			this.el.title    = this.n+'DatePicker';
			this.isCurrTime ? this.update(this.datePart(this.isCurrTime, 'y', true),this.datePart(this.isCurrTime, 'm', true),this.datePart(this.isCurrTime, 'd', true),this.datePart(this.isCurrTime, 'h', true),this.datePart(this.isCurrTime, 'f', true)) : this.update();
			this.bind();
		};

	init.prototype = {
		update : function (y, m, d, h, s) {
			var con = [], week = ['Su','Mo','Tu','We','Th','Fr','Sa'], D = this.D, _this = this, time, fhours, fminutes;
			fn = function (a, b) {
				return '<td title="'+_this.n+'DatePicker" class="noborder hand" onclick="'+_this.n+'.update('+a+')">'+b+'</td>';
			},
			_html = '<table cellpadding=0 cellspacing=2>';
			y && D.setYear(D.getFullYear() + y);
			m && D.setMonth(D.getMonth() + m);
			var year = D.getFullYear(), month = D.getMonth() + 1, date = d || D.getDate(), hours = (h||h=='00'||h=='0') ? h : D.getHours(), minutes = (s||s=='00'||s=='0') ? s : D.getMinutes();
			fhours = _this.formatDate(hours);
			fminutes = _this.formatDate(minutes);
			time = this.isShowTime ? ' '+fhours+':'+fminutes : '';

			//循环出星期
			for (var i=0; i<week.length; i++) con.push('<td title="'+this.n+'DatePicker" class="noborder">'+week[i]+'</td>');
			
			//循环显示当前月空白的天数(当前月第一天是星期几最后一天星期几)
			for (var i=0; i<D._fd(); i++ ) 
				con.push('<td title="'+this.n+'DatePicker" class="noborder"> </td>');
			
			//循环显示天数
			for (var i=0; i<D._fc(); i++ ) {
				con.push('<td class="hand'+(date==(i+1) ? " current" : "")+'" onclick="'+this.n+'.fillInput('+year+', '+month+', '+(i+1)+', '+hours+', '+minutes+')">'+(i+1)+'</td>');
			}
			
			var toend = con.length%7;
			if (toend != 0) for (var i=0; i<7-toend; i++) con.push('<td class="noborder"> </td>');
			_html += '<tr>'+fn("-1, null,"+date+","+hours+","+minutes+"", "<<")+fn("null, -1,"+date+","+hours+","+minutes+"", "<")+'<td title="'+this.n+'DatePicker" colspan=3 class="strong">'+year+this.seprator+_this.formatDate(month)+this.seprator+_this.formatDate(date)+time+'</td>'+fn("null, 1,"+date+","+hours+","+minutes+"", ">")+fn("1, null,"+date+","+hours+","+minutes+"", ">>")+'</tr>';
			
			for (var i=0; i<con.length; i++) _html += (i==0 ? '<tr>' : i%7==0 ? '</tr><tr>' : '') + con[i] + (i == con.length-1 ? '</tr>' : '');

			//显示时间选择器
			if (this.isShowTime){
				var colspan = this.isShowMenu ? 7 : 5;
				var button  = this.isShowMenu ? '' : '<td colspan="2" class="hand" onclick="'+this.n+'.fillInput('+year+', '+month+', '+date+', '+hours+', '+minutes+')">确定</td>';
				_html += '<tr><td title="'+this.n+'DatePicker" colspan="'+colspan+'" class="noborder" style="text-align:left;"><input title="'+this.n+'DatePicker" type="text" value="'+fhours+'" class="time" onblur="'+this.n+'.update(null,null,'+date+',this.value,'+minutes+');" />&nbsp;时&nbsp;<input title="'+this.n+'DatePicker" type="text" value="'+fminutes+'" class="time" onblur="'+this.n+'.update(null,null,'+date+','+hours+',this.value)" />&nbsp;分钟</td>'+button+'</tr>';
			}

			//显示菜单选择器
			if (this.isShowMenu){
				var clear = this.isShowOk ? '<td title="'+this.n+'DatePicker" colspan="3" class="noborder"></td>' : '<td title="'+this.n+'DatePicker" class="noborder"></td><td title="'+this.n+'DatePicker" colspan="2" onclick="'+this.n+'.clear();" class="hand">清空</td>';
				_html += '<tr>'+clear+'<td title="'+this.n+'DatePicker" colspan="2" class="hand" onclick="'+this.n+'.update('+_this.datePart(this.curdatetime, 'y', true)+','+_this.datePart(this.curdatetime, 'm', true)+','+_this.datePart(this.curdatetime, 'd', true)+');">今天</td><td colspan="2" class="hand" onclick="'+this.n+'.fillInput('+year+', '+month+', '+date+', '+hours+', '+minutes+')">确定</td></tr>';
			}
			!!this.box ? this.box.innerHTML = _html : this.createBox(_html);
		},
		fillInput : function (y, m, d, h, f) {
			var _this = this, time;
			time = this.isShowTime ? _this.formatDate(h)+':'+_this.formatDate(f) : '';
			this.el.value = y + this.seprator + _this.formatDate(m) + this.seprator + _this.formatDate(d) + (time && ' '+time);
			if (!this.isShowOk){
				_this.hide();
			}else{
				if (this.isCallBack){
					try {
						if(typeof this.isCallBack == 'function') {
							this.isCallBack(this.el.value);
						} else {
							eval(this.isCallBack);
						}
					} catch(e) {
						alert('内部出现错误');
					}
				}
			}
			this.update(this.datePart(this.el.value, 'y', true),this.datePart(this.el.value, 'm', true),this.datePart(this.el.value, 'd', true),this.datePart(this.el.value, 'h', true),this.datePart(this.el.value, 'f', true));
		},
		formatDate : function (d,encode,all){
			var formatD = ['00','01','02','03','04','05','06','07','08','09'];						//增加0前缀
			var formatE = {'00':0,'01':1,'02':2,'03':3,'04':4,'05':5,'06':6,'07':7,'08':8,'09':9};	//去掉0前缀
			with (this.D || new Date){
				if (all){
					return [
						[getFullYear(), formatD[getMonth()+1]||getMonth()+1, formatD[getDate()]||getDate()].join('-'),
						[formatD[getHours()]||getHours(), formatD[getMinutes()]||getMinutes(), formatD[getSeconds()]||getSeconds()].join(':')
					].join(' ');
				}else{
					return (encode ? formatE[d] : formatD[d]) || d;
				}
				return null;
			}
		},
		datePart : function (date,type,compare){
			var dateArr = date.split(' ');
			var partStr = '',D = this.D, _this = this;
			var riqiArr = dateArr[0].split(this.seprator);
			var timeArr = dateArr[1] ? dateArr[1].split(':') : '';
			switch(type.toLocaleLowerCase()){
				case 'y':
					partStr = compare ? riqiArr[0]-D.getFullYear() : riqiArr[0];
					break;
				case 'm':
					partStr = compare ? this.formatDate(riqiArr[1],true)-(D.getMonth()+1) : riqiArr[1];
					break;
				case 'd':
					partStr = this.formatDate(riqiArr[2],true);
					break;
				case 'h':
					partStr = this.formatDate(timeArr[0],true);
					break;
				case 'f':
					partStr = this.formatDate(timeArr[1],true);
					break;
			}
			return partStr;
	
		},
		show : function () {
			var s = this.box.style, is = this.mask.style;
			s['left'] = is['left'] = getPos(this.el).x + 'px';
			s['top'] = is['top'] = getPos(this.el).y + this.el.offsetHeight + 'px';
			s['display'] = is['display'] = 'block';
			is['width'] = this.box.offsetWidth - 2 + 'px';
			is['height'] = this.box.offsetHeight - 2 + 'px';
		},
		hide : function () {
			this.box.style.display = 'none';
			this.mask.style.display = 'none';
		},
		bind : function () {
			var _this = this;
			if (!this.isShowOk){
				addEvent(document, 'click', function (e) {
					e = e || window.event;
					var t = e.target || e.srcElement;
					if (t.title != _this.n+'DatePicker') {
						_this.hide();
					}else{
						_this.show();
					}
				});
			}
		},
		clear : function (){
			this.el.value = '';
		},
		createBox : function (html) {
			var box = this.box = document.createElement('div'), mask = this.mask = document.createElement('iframe');
			box.className = this.config.className || 'datepicker';
			mask.src = 'javascript:false';
			mask.frameBorder = 0;
			box.style.cssText = this.isShowOk ? 'position:absolute;z-index:9999;' : 'position:absolute;display:none;z-index:9999;';
			mask.style.cssText = 'position:absolute;display:none;z-index:9998';
			box.title = this.n+'DatePicker';
			box.innerHTML = html;
			
			if (this.isShowOk){
				if (this.isBodyBox){
					//在指定id下创建节点
					this.el.appendChild(box);
					this.el.appendChild(mask);
				}else{
					//在body下创建节点
					document.body.appendChild(box);
					document.body.appendChild(mask);
				}
			}else{
				//在body下创建节点
				document.body.appendChild(box);
				document.body.appendChild(mask);
			}
			return box;
		}
	}
	return init;
}();

自行拷贝创建相应文件引用即可。


© 著作权归作者所有

共有 人打赏支持
酱哥哥
粉丝 27
博文 29
码字总数 10927
作品 0
合肥
高级程序员
私信 提问
随便syjefbz/date-picker

date-picker 一个非常简单的日期选择插件 效果图 示例 查看项目目录下的 文件夹 jsfiddle示例 使用 ###引入css ###引入javascript

随便syjefbz
2016/03/19
0
0
开源一个ReactNative日历控件

项目地址: react-native-slideable-calendar-strip 演示地址: Calendar-Strip.mp4 为何要再实现一个日历控件 已经有了react-native-calendar-strip为何还需要我这个日历控件? 一般的甲方都会...

周辉爱学习
2018/05/22
0
0
使用GridLayout绘制自定义日历控件

转载请标注:https://my.oschina.net/FlyinTang/blog/751731 效果图 思路:就是先设置Gridlayout的行列数,然后往里面放置一定数目的自定义日历按钮控件,最后实现日历逻辑就可以了。 步骤:...

FlyinTang
2016/09/26
395
0
一步一步构建自己的简单日历控件 MySimpleCalendar

日历控件大家应该不陌生,github 上面一搜一大堆,但是我们拿到 github 上面的一个日历控件,想动手改改功能改改需求,有时可能会觉得无从下手,(当然了,老司机就忽略我说的 —。—)那么,...

2018/01/15
0
0
疯狂ios讲义之日期选择器(UIDatePicker)

UIDatePicker是一个可以用来选择日期和时间的控件。除此之外,它也可作为倒计时控件。 日期选择器(UIDatePicker)继承了UIControl,因此UIDatePicker可以作为活动控件使用,能与用户交互,既...

博文视点
2014/01/23
26.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
41分钟前
0
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
4
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部