精华内容
下载资源
问答
  • 时间选择框

    2017-06-30 10:05:02
    想必有很多的道友都使用过时间插件,各种各样的很多,今天给大家分享一个,自己写的一个时间小插件,不在样式有多绚,主要和大家分享一下心得,按惯例先上效果图: 恩,就是这个样子(样式就不说了 根据自己的...

    想必有很多的道友都使用过时间插件,各种各样的很多,今天给大家分享一个,自己写的一个时间小插件,不在样式有多绚,主要和大家分享一下心得,按惯例先上效果图:


    恩,就是这个样子(样式就不说了 根据自己的需求定样式就行了 ),调用很简单:

    Array.prototype.forEach.call(
    
    	document.querySelectorAll(".date-input"),//一次调用多个
    
    	function(item){
    
    		new MyDate(item,{//初始化的对象 item
    
    			type: "-",//y-m-d type 链接方式 可以不写
    			
    			complete: true//为true时显示 小时分钟  默认为false
    		})
    
    	}
    )
    然后就是我们的 js 代码 ( 具体说明在注释里面 ):

    ;(function(win,doc,_undefined){
    
    	var MyDate;
    
    	MyDate = (function(){
    
    		function MyDate(obj,option){
    
    			this._obj = obj || '',//这里就是我们的input 对象
    
    			this._type = option&&option.type || "-",//年月日连接类型
    
    			this._complete = option&&option.complete || false,//是否显示小时 分钟
    
    			this._pNode = '',//this._dom的父元素
    
    			this._dom = '',//date-container  日历的盒子元素
    
    			this._cyear = '',
    
    			this._cmonth = '',
    
    			this._cday = '',
    
    			this._yearNode = '',//展示 年份 的node 下面同理
    
    			this._monthNode = '',
    
    			this._daysNode = '',
    
    			this._hourNode = '',
    
    			this._msNode = '',
    
    			this._selectTimer = '';//选着好的数据  可以储存在这里  可以根据this._complete是否显示时间
    
    			this.init();//日历初始化
    
    		}
    
    		return MyDate.prototype.init = function(){
    
    			/**
    			 *
    			 * 模式: 通用的工厂+原型的模式
    			 *
    			 */
    
    			var _obj = this._obj;
    
    			if(!_obj || _obj.nodeType !== 1) throw new Error("传入的是一个错误的元素");
    
    			this._pNode = _obj.parentNode;
    
    			this._pNode.style.position = "relative";
    
    			/**
    			 * 在这里创建DOM
    			 */
    			
    			var _dom,_doc = doc,_el;
    			
    			_dom = _doc.createElement("div"); //日历的盒子元素
    
    			_dom.className = "date-container";
    
    			_dom.style.display = "none";
    
    			/**
    			 * 给我们的 input 绑定 focus 事件
    			 */
    			this._obj.onfocus = function(){
    
    				Array.prototype.forEach.call(doc.querySelectorAll(".date-container"),function(item){
    
    					item.style.display = 'none';
    				})
    
    				_dom.style.display = "block";
    			}
    
    			this._dom = _dom;
    
    			/**
    			 * 调用创建 日历 元素的方法  然后把 节点 append 进入 this._dom 日历的盒子元素
    			 */
    
    			_dom.appendChild( this.boxTemplate(_doc) );
    
    
    			/**
    			 * 成功之后 把盒子元素 放进 this._pNode  包裹整个日历插件的容器中  也是 input的父元素
    			 */
    
    			this._pNode.appendChild(_dom);
    
    			// 以上就是 整个初始化的分解动作 我们只需要把这几步 逐个实现就好了
    			// 同时在调用 : this.boxTemplate(_doc)  时候  中间 也会分解 很多步骤
    			// 这中间包括  事件绑定 属性添加  dom 节点创建 、、、、
    
    		},
    		MyDate.prototype.boxTemplate = function(_doc){
    
    			var _box,_span,_div,_ym,_ym_c1,_ym_c2,_days,_hms,_hms_c1,_hms_c2,_hms_c3,_yearNode,_monthNode,_daysNode,_hourNode,_msNode;
    
    			_div = _doc.createElement("div"),
    
    			_span = _doc.createElement("span"),
    
    			(_box = _div.cloneNode()).className = "show-ymd",
    
    			(_ym = _div.cloneNode()).className = "show-ym",//box-childred
    
    			//(_days = _div.cloneNode()).className = "show-days",//box-childred
    
    			(_hms = _div.cloneNode()).className = "show-hms",//box-childred
    
    			/**
    			 * _ym 的子节点
    			 */
    			(_ym_c1 = _span.cloneNode()).className = "ym-box",
    
    			_ym_c2 = _ym_c1.cloneNode(true),
    
    			_ym_c1.appendChild( this.singleDom({"name": "div","cl": "select-btn prev-year","_html": "上一年","type": "click","handler": this.selectYmHandler,"attr": [{"key":"data-type","value": "prev"}]}) ),
    
    			this._yearNode = _yearNode = this.singleDom({"name": "select","cl": "date-year","type": "change","handler": this.selectChangeHandler,"init": true}),
    
    			_ym_c1.appendChild( _yearNode ),//这类的标签要立即初始化
    
    			_ym_c1.appendChild( this.singleDom({"name": "div","cl": "select-btn next-year","_html": "下一年","type": "click","handler": this.selectYmHandler,"attr": [{"key":"data-type","value": "next"}]}) ),
    
    			_ym_c2.appendChild( this.singleDom({"name": "div","cl": "select-btn prev-month","_html": "上一月","type": "click","handler": this.selectYmHandler,"attr": [{"key":"data-type","value": "prev"}]}) ),
    
    			this._monthNode = _monthNode = this.singleDom({"name": "select","cl": "date-month","type": "change","handler": this.selectChangeHandler,"init": true}),
    
    			_ym_c2.appendChild( _monthNode ),
    
    			_ym_c2.appendChild( this.singleDom({"name": "div","cl": "select-btn next-month","_html": "下一月","type": "click","handler": this.selectYmHandler,"attr": [{"key":"data-type","value": "next"}]}) ),
    
    			_ym.appendChild( _ym_c1 ),
    
    			_ym.appendChild( _ym_c2 ),
    
    
    			/**
    			 * _hms 的子节点
    			 */
    			
    			 (_hms_c1 = _span.cloneNode()).className = "ym-box",
    
    			 _hms_c2 = _hms_c1.cloneNode(true),
    
    			 (_hms_c3 = _span.cloneNode()).className = "selected-btn",
    
    			 this._hourNode = _hourNode = this.singleDom({"name": "select","cl": "date-hour","attr": '',"type": "change","handler": this.selectChangeHandler,"init": true}),
    
    			 _hms_c1.appendChild( _hourNode ),
    
    			 this._msNode = _msNode = this.singleDom({"name": "select","cl": "date-ms","attr": '',"type": "change","handler": this.selectChangeHandler,"init": true}),
    			 
    			 _hms_c2.appendChild( _msNode ),
    
    			 _hms_c3.appendChild( this.singleDom({"name": "span","cl": "date-btn sure-btn","_html": "确定","handler": this.sureCancelHandler,"type": "click","attr": [{"key": "data-type","value": 'sure'}]}) ),
    
    			 _hms_c3.appendChild( this.singleDom({"name": "span","cl": "date-btn cancel-btn","_html": "取消","handler": this.sureCancelHandler,"type": "click","attr": [{"key": "data-type","value": 'cancel'}]}) ),
    
    			 _hms.appendChild(_hms_c1),
    
    			 _hms.appendChild(_hms_c2),
    
    			 _hms.appendChild(_hms_c3),
    
    			 _box.appendChild(_ym),
    
    			 this._daysNode = _daysNode = this.singleDom({"name": "div","cl": "show-days","init": true}),
    
    			 _box.appendChild( _daysNode ),
    
    			 _box.appendChild(_hms);
    
    			 return _box;
    
    		},
    		MyDate.prototype.createHourHandler = function(){
    
    			/**
    			 * 判断是否是今天 
    			 */
    			
    			var _pNode = this._pNode,_year = parseInt(this._yearNode.value),
    				_month = parseInt(this._monthNode.value),
    				_day = _pNode.querySelector(".day-list.active"),
    				_hNode = this._hourNode,_hour;
    
    
    			if(!_day) {
    
    				alert("请选择日期");
    
    				return false;
    			} 
    
    			_day = parseInt(_day.innerHTML);
    
    
    			if(_year === this._cyear && _month === this._cmonth && _day === this._cday){
    
    				_hour = ( new Date() ).getHours();
    
    			}else{
    
    				_hour = 23;
    			}
    
    			_hNode.innerHTML = '';
    
    			for(let i=0;i<=_hour;i++){
    
    				_hNode.appendChild( this.singleDom({
    					"name": "option",
    					"_html": (i < 10 ? "0" + i : i) + "时"
    				}) );
    			}
    
    			this.createMsHandler();
    
    		},
    		MyDate.prototype.clickDaysHandler = function(_this,el){
    
    			var _className = el.className,_active;
    
    			if(_className.indexOf(" active") != -1) return false;
    
    			_active = el.parentNode.querySelector(".active");
    
    			!_active ? '' : _active.className = _className;
    
    			el.className = _className + " active";
    
    			/**
    			 * 此时根据 选着的天 来加载小时  只要不是当天  都是24小时
    			 */
    			
    			_this.createHourHandler();
    
    
    		},
    		MyDate.prototype.daysTemplate = function (days) {
    
    			if(!days) throw new Error("days is not a number");
    			
    			var day_box = this._daysNode;
    
    			day_box.innerHTML = '';
    
    			for(let i=1;i<=days;i++){
    
    				day_box.appendChild( this.singleDom({
    					"name": "span",
    					"cl": i == days ? "day-list active" : "day-list",
    					"type": "click",
    					"handler": this.clickDaysHandler,
    					"_html": i < 10 ? "0" + i : i
    				}) );
    
    			}
    
    			this.createHourHandler();
    
    		},
    		MyDate.prototype.createDaysHandler = function(){
    
    			var _pNode = this._pNode,
    				_year = parseInt(this._yearNode.value),
    				_month = parseInt(this._monthNode.value),_day;
    
    			/**
    			 * 判断是否是今年  
    			 *
    			 * 是: 判断是否是当月--》是:判断今天是哪一天  不是: 判断这个月的最后一天
    			 *
    			 * 不是: 判断选中的这个月的最后一天
    			 */
    			
    			//判断是否是本年
    			if(_year === this._cyear && _month === this._cmonth){
    
    				//判断是否是当月当年
    		
    				_day = ( new Date() ).getDate();
    
    			}else{
    
    				//判断是不是二月
    				if(_month === 2){
    
    					//判断是不是闰年
    					_day = this.isLeapYear(_year) ? 29 : 28;
    
    				}else{
    
    					_day =  ("-1-3-5-7-8-10-12").indexOf("-"+_month) != -1 ?  31 : 30;
    				}
    			}
    
    			// alert(_day);
    
    
    			this.daysTemplate(_day);
    
    
    
    		},
    		MyDate.prototype.createMsHandler = function(){
    
    			/**
    			 * 判断是否是今天 
    			 */
    			
    			var _pNode = this._pNode,_year = parseInt(this._yearNode.value),
    				_month = parseInt(this._monthNode.value),
    				_day = _pNode.querySelector(".day-list.active"),
    				_hour = parseInt(this._hourNode.value),_ms,
    				_msNode = this._msNode;
    
    			if(!_day) {
    
    				alert("请选择日期");
    
    				return false;
    			} 
    
    			_day = parseInt(_day.innerHTML);
    
    			if( _year === this._cyear && _month === this._cmonth && _day === this._cday && _hour === (new Date).getHours() ){
    
    				_ms = (new Date).getMinutes();
    
    			}else{
    
    				_ms = 59;
    			}
    
    			_msNode.innerHTML = '';
    
    			for(let i=0;i <= _ms;i++){
    
    				_msNode.appendChild( this.singleDom({
    					"name": "option",
    					"_html": (i < 10 ? "0"+i : i) + ":00"
    				}) )
    			}
    
    
    			this.saveSelectTimer({"year": _year,
    				"month": _month < 10 ? "0"+_month : _month,
    				"day": _day < 10 ? "0"+_day : _day,
    				"hour": _hour < 10 ? "0"+_hour : _hour,
    				"ms": "00:00"
    			});
    
    
    
    		},
    		MyDate.prototype.saveSelectTimer = function(option){
    
    			if(!option) throw new Error("option is not exist");
    
    			setTimeout(()=>{
    
    				this._selectTimer = {
    
    					"year": option["year"] || parseInt( this._yearNode.value ),
    					"month": option["month"] || parseInt( this._monthNode.value ),
    					"day": option["day"] || parseInt( this._daysNode.querySelector(".active").innerHTML ),
    					"hour": option["hour"] || parseInt( this._hourNode.value ),
    					"ms": option["ms"] || parseInt( this._msNode.value ),
    				}
    
    			}, 25)
    
    		},
    		MyDate.prototype.selectChangeHandler = function(_this,el){
    
    			var _className = el.className;
    
    			switch (_className) {
    				case "date-year":
    
    					//选择的年份  如果不是当年  月份应该是整个12个月
    
    					_this.createSelectDom(_this._monthNode,'',"month",parseInt(el.value));
    
    					_this.createDaysHandler();
    
    					break;
    				case "date-month":
    
    					/**
    					 * 当月份改变的时候  要重新计算天数
    					 */
    					
    					_this.createDaysHandler();
    
    					break;
    				case "date-hour":
    
    					/**
    					 * 当月份改变的时候  要重新计算天数
    					 */
    					
    					_this.createMsHandler();
    
    					break;
    				case "date-ms":
    
    					/**
    					 * 当分钟改变的时候  重新储存 数据 this._selectTimer
    					 */
    					
    					_this.saveSelectTimer({"ms": el.value});
    
    					break;
    				default:
    					// statements_def
    					break;
    			}
    
    
    
    		},
    		MyDate.prototype.selectYmHandler = function(_this,el){
    
    			var _type = el.getAttribute("data-type"),
    				_select = el.parentNode.querySelector("select"),
    				_ops = _select.querySelectorAll("option"),
    				_select_v = parseInt(_select.value),_ops_v = {},_ops_arr = [],_cvalue;
    
    			if(!_ops) return false;
    
    			Array.prototype.forEach.call(_ops,function(item){
    
    				_ops_v[parseInt(item.innerHTML)] = item;
    
    				_ops_arr.push( parseInt(item.innerHTML) );
    			})
    
    			/**
    			 * 在这里判断 是prev || next
    			 */
    			
    			_cvalue = _type == "prev" ? Math.max.apply(null,_ops_arr) : Math.min.apply(null,_ops_arr);
    
    			if(_select_v === _cvalue)  return false;
    			
    			_select_v = _type == "prev" ? ++_select_v : --_select_v;
    
    			_ops_v[_select_v].selected = true;
    
    			_this.selectChangeHandler(_this,_select);
    			
    			
    		},
    		MyDate.prototype.singleDom = function(options){
    			/**
    			 * name 必填  否则报错
    			 */
    			var el,attr = options["attr"],type = options["type"],init = options["init"];
    
    			if(!options || !options["name"]) throw new Error("options is error");
    
    			el = doc.createElement(options["name"]);
    
    			el.className = options["cl"] || '';
    
    			el.innerHTML = options["_html"] || '';
    
    			if(attr){
    
    				attr.forEach(function(item,index){
    
    					el.setAttribute(item["key"], item["value"]);
    
    				})
    			}
    
    			if(init){
    
    				this.selectInitHandler(el);
    
    			}
    
    			if(type){
    
    				this.addEvent(el,type,options["handler"],false);
    
    			}
    
    			return el;
    		},
    		MyDate.prototype.selectInitHandler = function(el){
    
    			var _className = el.className,_date = new Date(),_elc,_type;
    
    			switch (_className) {
    				case "date-year":
    					_elc = _date.getFullYear();
    					_type = "year";
    					break;
    				case "date-month":
    					_elc = _date.getMonth() + 1;
    					_elc = _elc > 9 ? _elc : "0" + _elc ;
    					_type = "month";
    					break;
    				case "show-days":
    					_elc = _date.getDate();
    					_type = "days";
    					break;
    				case "date-hour":
    					_elc = _date.getHours();
    					_type = "hour";
    					break;
    				case "date-ms":
    					_elc = _date.getMinutes();
    					_type = "ms";
    					break;
    				default:
    					// statements_def
    					break;
    			}
    
    			/**
    			 * 调用  创建 select的子节点
    			 */
    			this.createSelectDom(el,_elc,_type);
    			
    		},
    		MyDate.prototype.createSelectDom = function(el,_d,_type,cyear){
    
    			if(!_type) throw new Error("createSelectDom options error");
    
    			switch (_type) {
    
    				case "year":
    
    					this._cyear = _d;
    					
    					for(let i=_d;i>_d - 20;i--){
    
    						el.appendChild( this.singleDom({"name": "option","_html": i + "年"}) );
    					}
    
    					break;
    				case "month":
    
    					if(!_d){
    
    						if(cyear && cyear == this._cyear){
    
    							/**
    							 * 选择当前年的时候
    							 */
    							
    							el.innerHTML = '';
    							
    							_d = this._cmonth;
    
    							for(let i=_d;i >=1 ;i--){
    
    								el.appendChild( this.singleDom({"name": "option","_html": (i < 10 ? '0'+ i : i) + "月"}) );
    
    							}
    
    						}else{
    
    							if(el.querySelectorAll("option").length === 12) return false;
    
    							el.innerHTML = '';
    
    							for(let i=1;i <=12 ;i++){
    
    								el.appendChild( this.singleDom({"name": "option","_html": (i < 10 ? '0'+ i : i) + "月"}) );
    
    							}
    						}
    
    						
    					}else{
    
    						/**
    						 * 初始化的时候
    						 */
    
    						_d = parseInt(_d);
    
    						this._cmonth = _d;
    						
    						for(let i=_d;i >=1 ;i--){
    
    							el.appendChild( this.singleDom({"name": "option","_html": (i < 10 ? '0'+ i : i) + "月"}) );
    
    						}
    
    					}
    
    					
    
    					break;
    				case "days":
    
    					this._cday = _d;
    
    					for(let i=0;i <= _d ;i++){
    
    						el.appendChild( this.singleDom({
    							"name": "span",
    							"cl": i !== _d ? "day-list" : "day-list active",
    							"type": "click",
    							"handler": this.clickDaysHandler,
    							"_html": i < 10 ? "0" + i : i
    						}) );
    					}
    					break;
    				case "hour":
    					
    					for(let i=_d;i >=0 ;i--){
    
    						el.appendChild( this.singleDom({"name": "option","_html": (i < 10 ? '0'+ i : i) + "时"}) );
    
    					}
    
    					break;
    				case "ms":
    					
    					for(let i=_d;i >=0 ;i--){
    
    						el.appendChild( this.singleDom({"name": "option","_html": (i < 10 ? '0'+ i : i) + ":00"}) );
    
    					}
    
    					this.saveSelectTimer({"ms": (_d < 10 ? '0'+ _d : _d) + ":00"});
    
    					break;
    				default:
    					// statements_def
    					break;
    			}
    
    		},
    		MyDate.prototype.sureCancelHandler = function(_this,el){
    
    			var _type = el.getAttribute("data-type");
    
    			if(_type == 'sure'){
    
    				var _t = _this._selectTimer,_r = _this._type,
    				_result = _t["year"] + _r + (parseInt(_t["month"]) < 10 ? "0"+parseInt(_t["month"]) : parseInt(_t["month"]) ) + _r + (parseInt(_t["day"]) < 10 ? "0"+parseInt(_t["day"]) : parseInt(_t["day"]) );
    
    				_this._obj.value = _this._complete ? _result + ' '+(parseInt(_t["hour"]) < 10 ? "0"+parseInt(_t["hour"]) : parseInt(_t["hour"]) ) + ":"+_t["ms"] : _result;
    			}
    
    			_this._dom.style.display = "none";
    			
    		},
    		MyDate.prototype.addEvent = function(el, eType, handle, bol){
    
    			// console.log(el.toString() + eType);
    
    			if(el.addEventListener){           //如果支持addEventListener
    
    		        el.addEventListener(eType, handle.bind(null,this,el), bol);
    
    		    }else if(el.attachEvent){          //如果支持attachEvent
    
    		        el.attachEvent("on"+eType, handle.bind(null,this,el));
    
    		    }else{                                  //否则使用兼容的onclick绑定
    
    		        el["on"+eType] = handle.bind(null,this,el);
    
    		    }
    		},
    		MyDate.prototype.isLeapYear = function(year){
    
    			return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);
    		},
    		MyDate;
    
    	})(),
    
    	win.MyDate = MyDate;
    
    
    })(window,document)

    顺便 附上 html 和 css  大家可以复制看下效果:


    html:

    <div class="box">
    
    		<div class="date-box">
    			
    			<input type="text" name="" class="date-input" />
    
    
    		</div>
    
    
    		<div class="date-box">
    			
    			<input type="text" name="" class="date-input" />
    
    
    		</div>
    		
    		
    
    	</div>

    css:

    *{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}body,html{width:100%;overflow-x:hidden;color:#4d4d4d;font:14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif}body{-webkit-tap-highlight-color:rgba(255,0,0,0.5);-webkit-font-smoothing:antialiased;background-color:#fff}a{text-decoration:none}img{display:block;width:100%;vertical-align:middle}ul,li{list-style:none}.box{width:800px;height:500px;margin:10px auto;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;padding:4px}.date-box{width:60%;height:42px;margin:20px auto;position:relative}.date-box .date-input{width:100%;height:100%;border:none;outline:none;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;padding-left:15px}.date-box .date-input:hover{border-color:#aaaaaa}.date-box .date-input:focus{border-color:#666666}select{border:none;outline:none}.date-container{position:absolute;top:100%;left:50%;transform:translate3d(-50%, 0px, 0px);padding:2px 5px;box-shadow:0px 0px 5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#f8f8f8;overflow:hidden;cursor:pointer;font-size:14px;z-index:9999}.show-ymd,.show-ym,.show-hms,.show-days{width:100%;overflow:hidden}.show-ymd{width:348px}.ym-box{float:left;height:24px;margin-right:10px;position:relative;border:1px solid #cccccc;margin-bottom:4px}.select-btn,.date-year,.date-month{float:left;height:100%}.date-year,.date-month{width:66px;color:#4d4d4d}.select-btn{padding:1px 3px;background-color:#f1f1f1;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.select-btn:hover{background-color:#F3BABA}.show-days{padding:2px}.day-list{display:inline-block;background-color:#f1f1f1;width:42px;height:36px;line-height:36px;text-align:center;margin:0px 3px 4px;font-size:14px;color:#4d4d4d;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.day-list:hover{background-color:#ccc;color:#f8f8f8}.day-list.active{background-color:red;color:#f8f8f8}.show-hms{padding-top:5px}.date-hour,.date-ms{color:#4d4d4d;width:70px;max-height:100px}.selected-btn{float:right;padding-right:10px;padding-top:2px}.date-btn{padding:4px 10px;margin-left:10px;background-color:#ccc;color:#fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}.date-btn:hover{background-color:red}
    /*# sourceMappingURL=sDate.css.map */
    

    总结: 一个任务的关键点在于思路逻辑和任务的分解,希望能对需要的道友有些帮助,同时也希望多交流。


    展开全文
  • 详解iOS时间选择框

    2020-09-02 15:38:42
    主要为大家详细介绍了详解iOS时间选择框,感兴趣的小伙伴们可以参考一下
  • jquery时间选择框

    2012-06-30 17:32:47
    jquery时间选择框,支持时,分,秒。支持时间选择!
  • 主要介绍了JS实现漂亮的时间选择框效果,结合实例形式分析了javascript时间选择框插件的实现与使用方法,需要的朋友可以参考下
  • date 的形式加了一个时间选择框,但是点击下图X号右侧的增大减少时间的按钮时候,比如当前4号 往前减少,当减少到31号时候,应该 月份对应8月,但是这个月份不会变化,请问大神该怎么处理呢? ![图片说明]...
  • 日期时间选择框

    千次阅读 2018-10-24 14:06:13
    日期时间选择框: 1) jsp 部分: &lt;div class="form-group"&gt; &lt;label for="dtp_input1" class="control-label"&gt;开始时间:&lt;/label&gt; &lt...
    日期时间选择框:
    1) jsp 部分:
    <div class="form-group">
        <label for="dtp_input1" class="control-label">开始时间:</label>
        <div class="input-group date beginTime"  data-link-field="dtp_input1">
            <input class="form-control" size="16" id="beginTime" type="text" value="" data-bind='value: beginTime' readonly >
            <span class="input-group-addon" ><i class="glyphicon glyphicon-remove" onclick="clearForm()"></i></span>
            <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
        </div>
        <input type="hidden" id="dtp_input1" value="" /><br/>
    </div>
    
    <div class="form-group">
        <label for="dtp_input2" class="control-label">截止时间:</label>
        <div class="input-group date endTime" data-link-field="dtp_input2">
            <input class="form-control" size="16" id="endTime" type="text" value="" data-bind='value: endTime'  readonly>
            <span class="input-group-addon"><span class="glyphicon glyphicon-remove" onclick="clearForm1()"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
        </div>
        <input type="hidden" id="dtp_input2" value="" /><br/>
    </div>

    2) js 部分:

    <script type="text/javascript">
        $(function() {
           xxxxxx
           .....
    
            $('.beginTime').datetimepicker({
                format: 'yyyy-MM-dd hh:ii:00',
                language: "cn",
                weekStart: 0, //一周从哪一天开始
                todayBtn: 1, //
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 0,
                showMeridian: 1,
            }).on('changeDate',function(e){
                var starttime=$("#beginTime").val();
                if(starttime == "")
                    starttime = "1870-01-01 00:00:00"
                $(".endTime").datetimepicker('setStartDate',starttime);
                $(".beginTime").datetimepicker('hide');
            });
            $('.endTime').datetimepicker({
                format: 'yyyy-MM-dd hh:ii:00',
                language: "cn",
                weekStart: 0, //一周从哪一天开始
                todayBtn: 1, //
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 0,
                showMeridian: 1,
            }).on('changeDate',function(ev){
                var endtime=$("#endTime").val();
                if(endtime == "")
                    endtime = "2317-01-01 00:00:00"
                $(".beginTime").datetimepicker('setEndDate',endtime);
                $(".endTime").datetimepicker('hide');
            });
        });
    
    </script>
    展开全文
  • My97DatePicker 时间选择框 格式化 可以实现所选择的时间的格式化和开始时间与结束时间的联动
  • 准确的时间选择框.rar准确的时间选择框.rar
  • 准确的时间选择框.rar

    2010-03-28 22:53:41
    准确的时间选择框.rar准确的时间选择框.rar准确的时间选择框.rar准确的时间选择框.rar准确的时间选择框.rar准确的时间选择框.rar准确的时间选择框.rar准确的时间选择框.rar准确的时间选择框.rar准确的时间选择框.rar
  • H5小程序难免会用到从底部弹出时间选择框,在这里使用了jquery-weui实现了,店铺选择营业时间的功能。已经做好了时间格式和开始时间与结束时间的对比。注意使用的时候可以任意改动样式,但是jquery-weui自带的样式不...
  • android弹出时间选择框

    千次阅读 2014-05-24 14:28:31
    android弹出时间选择框

    时间选择框:

    	new DatePickerDialog(this, new OnDateSetListener() {
    
    				@Override
    				public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
    					if (year >= 1910 && year <= 2014) {
    						int temp = monthOfYear + 1;
    						String monthStr = temp < 10 ? "0" + temp : "" + temp;
    						etBirthday.setText(year + "-" + monthStr + "-" + dayOfMonth);
    					} else {
    						AppMsg.makeText(PersonalEditActivity.this, "超出可设置范围");
    					}
    				}
    			}, 1990, 0, 1).show();


     

     


     

    展开全文
  • 常用控件:时间选择框

    千次阅读 2018-01-19 17:54:58
    一:时间选择框 <input type="text" style="width:100px" id name > 1.时间选择框onfocus/onclick : WdatePicker({}) 此插件显示日历选择框,可通过属性控制显示范围,周末亮显,显示皮肤等 (1)...

    一:时间选择框

     

    <input type="text" style="width:100px" id name >

    1.时间选择框onfocus/onclick : WdatePicker({}) 

     

    此插件显示日历选择框,可通过属性控制显示范围,周末亮显,显示皮肤等

    (1)使用js文件

    WdatePicker.js 配置文件,在调用的地方仅需使用该文件 

    calendar.js 日期库主文件

    (2)常用模式

    $wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标

    lang,readOnly,dateFmt

    maxDate,minDate:设置时间范围

    maxDate:'#F{$dp.$D(\'id\',{d:-3});}':使用内置函数设置多个时间框的约束

    2.<fmt:formatDate >

     

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    <p>日期格式化 (5): <fmt:formatDate type="both" 
                dateStyle="medium" timeStyle="medium" 
                value="${now}" /></p>

     

    http://www.runoob.com/jsp/jstl-format-formatdate-tag.html

    jstl标签,格式化显示时间,部分时间,时间格式化,时间模式等

    value;type:date,time,both;dateStyle,timeStyle;pattern

     

     

     

     

    展开全文
  • jsp页面中时间选择框,包含jsp调用代码,直接将My97DatePicker包放到跟jsp同一目录下既可用
  • 时间选择框datepicker的使用

    千次阅读 2019-05-06 20:30:39
    bootstrap框架中的一个重要内容,时间选择框datepicker。 如,想要实现选择从某天到某天的两个输入框: 在HTML中写如下内容 <div class="input-daterange date-picker input-group" id="datepicker"> <...
  • Vant-UI移动端时间选择框

    千次阅读 2019-05-06 10:56:00
    使用Vant input框时有时需要调用时间选择,时间选择框要结合弹出层使用 <div class="van-cell van-field"> <span class="van-cell__title van-field__label righ">到期日:</span> <div...
  • 此外,使用laydate时间选择框生效的关键一点是,laydate框架会给input输入框增加一个lay-key=“1”,1也可能是其他数字。 例如下图所示,js实现动态添加多行数据,并使用laydate动态创建多个时间选择框 HTML代码...
  • javaScript 脚本完成的时间选择框,觉得很好看 有水印的
  • 一直觉得自己写的不是技术,而是情怀,一...本封装是一个比较常用的时间选择框,选择好时间之后通过block回调出来。 效果 使用 SelectTimeAreaViewItem.selectTimeAreaViewItemConfirm({ (startTime, endTime) in p
  • JQuery Mobile移动开发之日期时间选择框源码:之前一起在找有关JQuery mobile移动开发的日期选择框插件,找到了很多英文版本的,虽然国内也有人把英文版的汉化过,但是感觉效果不是很好,现在特奉献一个汉化版本的供...
  • 在网上找了好久试了好多次,不管用,最后想到给每一个时间选择框都加一个控制不就好了,成功解决。 例子: 前提是将laydate的依赖引入。 在官网下载https://www.layui.com/laydate/后按照提示将laydate环境引入...
  • ExtJS 6.2.0包含文本及时间选择框的自定义查询控件的解决方案,下拉式控件
  • layui两个时间选择框如何设置最大值与最小值 问题描述: layui设置两个时间选择框如何设置它们的选择范围 解决方案: var start = laydate.render({ elem: id , done: function (value, date, endDate) { ...
  • 笔者在一次开发中用到TimePicker 时间选择框组件。 要求是有默认值,就是从接口中返回的数据,但是TimePicker数据在一次加载后便不会更新 简单的说,如果在data里设置了default=null TimePicker就会就会显示...
  • antDesignVue 时间选择框 <a-date-picker :disabledDate="disabledDate" @ok="timeOk" format="YYYY-MM-DDTHH" :showTime="{ defaultValue: moment(moment().add(1,'hours').format('HH'), 'HH') }" v...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,482
精华内容 4,192
关键字:

时间选择框