文档章节

日期控件

酱哥哥
 酱哥哥
发布于 2014/06/27 10:28
字数 1793
阅读 138
收藏 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;
}();

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


© 著作权归作者所有

共有 人打赏支持
酱哥哥
粉丝 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为何还需要我这个日历控件? 一般的甲方都会...

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

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

FlyinTang
2016/09/26
395
0
疯狂ios讲义之日期选择器(UIDatePicker)

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

博文视点
2014/01/23
26.2K
0
WPF 4 日期选择器(DatePicker)

前一篇《WPF 4 日历控件(Calendar)》 中我们对日历控件的使用方式有了基本了解,本篇将继续介绍WPF 4 中另一个新控件“日期选择器”(DatePicker)。与Calendar 相比DatePicker 多出了一个...

junwong
2012/03/09
3.5K
0
Windows Phone 7 日期选择控件DatePicker和时间选择控件TimePicker

DatePicker和TimePicker控件是微软的Toolkit组件里面的控件。 DatePicker是日期的选择控件,运用于日期格式的输入。实现的效果如下 TimePicker是时间的选择控件,运用于时间格式的输入。实现...

junwong
2012/02/28
490
0
一步一步构建自己的简单日历控件 MySimpleCalendar

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

01/15
0
0
My97 DatePicker怎么满足这个需求?

My97 DatePicker 4.7.2,有个需求不知道怎么满足,一个文本框如果调用了这个日期控件,这个日期控件输入的值就只能是日期格式,而我这里,这个文本框可能是输入多个值,第一个值如果是时间类...

游客
2012/11/12
516
1
ComponentOne 2017 V2 版本正式发布

新版本,新体验,ComponentOne 2017V2让您惊喜无限! 日前,全球控件行业领导者葡萄城宣布,.NET全功能控件套包ComponentOne 发布2017V2 版本。这是继2017V1 版本全面支持Visual Studio 201...

葡萄城控件技术团队
2017/08/02
212
2
WPF 4 日历控件(Calendar)

在之前我已经写过两篇关于WPF 4 任务栏(Taskbar)相关的特性。相信自从VS2010 Beta 版放出后,WPF 的粉丝们肯定在第一时间了解了WPF 4 的一些新控件及新功能。赶在明天Visual Studio 2010 ...

junwong
2012/03/09
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring+jpaNo transactional EntityManager available

TransactionRequiredException: No transactional EntityManager availableEntityManager执行以下方法(refresh, persist, flush, joinTransaction, remove, merge) 都需要需要事务i......

wpfc
6分钟前
0
0
八幅漫画理解使用JSON Web Token设计单点登录系统

八幅漫画理解使用JSON Web Token设计单点登录系统 Sep 07, 2015 in Engineering 上次在《JSON Web Token - 在Web应用间安全地传递信息》中我提到了JSON Web Token可以用来设计单点登录系统。...

祖冲之
8分钟前
0
0
Spring框架中的设计模式(三)

Spring框架中的设计模式(三) 原创: 瑞查德-Jack 在之前的两篇文章中,我们看到了一些在Spring框架中实现的设计模式。这一次我们会发现这个流行框架使用的3种新模式。 本文将从描述两个创意...

瑞查德-Jack
11分钟前
0
0
[MicroPython]TPYBoard智能小车“飞奔的TPYBoard装甲一号”

智能小车作为现代的新发明,是以后的发展方向,他可以按照预先设定的模式在一个环境里自动的运作,不需要人为的管理,可应用于科学勘探等等的用途。智能小车能够实时显示时间、速度、里程,具...

bodasisiter
13分钟前
0
0
桌面虚拟化VDI(Virtual Desktop Infrastructure)

为了保证员工(客户)不把公司的资料复制、传输给别人。可以把员工平时办公放在服务器上做。所以使用桌面虚拟化。就是把一个服务器虚拟出很多桌面系统(如:windows)。 桌面虚拟化最大的优势...

王坤charlie
20分钟前
2
0
自我审视及职业规划

啊哈,不知不觉已经工作了3年了。程序员作为一门技术工作,如果分级的话我的能力如何呢?该怎么提升呢? 话说,我现在的能力属于中低级的层次吧,努力在向高级努力。为什么这么说呢: 因为我觉...

一口今心
23分钟前
1
0
《PHP和MySQL Web 开发》 第12章 MySQL高级管理

我决定好好写学习笔记了,对应上书上的目录和重要信息。不瞎jb写了。从这章开始吧,然后之前写的会编辑后重发。嗯,就酱。 12.1 深入理解权限系统 妈蛋 开头就卡住了。。。我先回去修改之前的...

十万猛虎下画山
24分钟前
1
0
Python 3.6:多态的实现

多态的作用不用多说,C++用如下条件来实现多态: 要有继承 要有虚函数函数重写 要有父类指针(父类引用)指向子类对象 实际上C++使用VPTR指针来完成这个事情,其是设计模式的基础,软件分层的基...

全部原谅
24分钟前
0
0
纯Python实现鸢尾属植物数据集神经网络模型[图]

纯Python实现鸢尾属植物数据集神经网络模型[图]: 尝试使用过各大公司推出的植物识别APP吗?比如微软识花、花伴侣等这些APP。当你看到一朵不知道学名的花时,只需要打开植物识别APP,拍摄一张...

原创小博客
26分钟前
1
0
2018安卓巴士开发者大会打造Android技术盛宴

2018安卓巴士开发者大会打造Android技术盛宴2018安卓巴士开发者大会将于8月25日在上海举行,作为中国最具前沿性、专业性的安卓技术会议,将邀请来自爱奇艺、阿里、饿了么等知名企业的一线工程...

逆鳞龙
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部