日期控件
日期控件
酱哥哥 发表于3年前
日期控件
  • 发表于 3年前
  • 阅读 121
  • 收藏 5
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

之前从网上搜罗的日期控件,感觉非常实用,样式也很漂亮。但是因为在手机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;
}();

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


标签: 时间控件 js
共有 人打赏支持
粉丝 28
博文 27
码字总数 10927
×
酱哥哥
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: