js原生写时间日期选择
2024-06-09 01:28:47
js原生写时间日期选择
html代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日期插件</title>
<link type="text/css" rel="stylesheet" href="./dist/dol-datepicker.css">
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
body{background-color:#E3E3E3; font-size:14px; color:#333; font-family:'微软雅黑'}
.main{width: 1000px;margin: 0 auto;background: #fff;padding:50px}
#date1,.time{display: inline-block;width: 200px;height: 30px;border: 1px solid #ccc;vertical-align: middle;margin:20px 5px;line-height: 30px}
</style>
</head>
<body><div class="main"><h1>示例1</h1><input type="text" id="date1"/>（限制四天之前不可选）<h1>示例2</h1><div class="box"><span>开始时间</span><div class="time" id="date2"></div><span>~</span><span>结束时间</span><div class="time" id="date3"></div><span>（限制从开始时间的后两天开始）</span></div></div>
</body>
<script type="text/javascript" src="./js/dol-datepicker.js"></script>
<script type="text/javascript">// demo1var picker1 = new Datepicker({elemName: 'date1',format: 'YYYY-MM-DD hh:mm:ss',min: -4,callBack: function(a, b){console.log(a, b)}});// demo2var picker2 = new Datepicker({elemName: 'date2',format: 'YYYY-MM-DD hh:mm',callBack: function(a, b){picker3.setMinScope(b, 2);}});var picker3 = new Datepicker({elemName: 'date3',format: 'YYYY-MM-DD hh:mm',callBack: function(a, b){picker2.setMaxScope(a);}});
</script>
</html>
js文件：
var Datepicker = (function(){// -- 核心工具方法 -- //var Utils = {};Utils.on = function(elem, even, target, fn){ //--事件监听器if(typeof target === 'string'){elem.addEventListener(even, function(e){if(e.target.tagName === target.toLocaleUpperCase()){fn.call(e.target, e);e.stopPropagation()}}, false);}else{fn = target;elem.addEventListener(even, function(e){fn.call(this, e);e.stopPropagation()}, false);}return Utils;};Utils.extend = function(options, newoptions, deep){ // 扩展覆盖属性for (var key in newoptions){if(deep && (isPlainObject(newoptions[key]) || Array.isArray(newoptions[key]))){if(isPlainObject(newoptions[key]) && !isPlainObject(options[key]))options[key] = {}if(Array.isArray(newoptions[key]) && !Array.isArray(options[key]))options[key] = []Utils.extend(options[key], source[key], deep)} else if (newoptions[key] !== undefined) options[key] = newoptions[key]}function isPlainObject(obj){try{ if(obj.constructor && !hasOwn.call(obj.constructor.prototype,"isPrototypeOf"))return false;} catch(e){ return false; }return true;}}Utils.isShow = function(dom, bln){ // 显示隐藏dom.style.display = bln ? 'block' : 'none';}Utils.format = function(time, format){ // 时间戳转换指定format格式var oDate = new Date(time)return format.replace(/YYYY|MM|DD|hh|mm|ss/g, function(str, index){var val = 0;if (str === 'YYYY') {val = oDate.getFullYear();} else if (str === 'MM') {val = oDate.getMonth()+1;} else if (str === 'DD') {val = oDate.getDate();} else if (str === 'hh') {val = oDate.getHours();} else if (str === 'mm') {val = oDate.getMinutes();} else if (str === 'ss') {val = oDate.getSeconds();}return Utils.repair(val);}); }Utils.parse = function(type, ops){if (type === 1){ // 字符串转ymdvar ymd = ops.value.match(/\d+/g);var aYmd = [];for(var i=0; i<ops.aYmdIndex.length; i++){aYmd.push(ymd[ops.aYmdIndex[i]]);}return aYmd;} else if(type === 2){ // 当前时间转ymdops.value = Utils.format(ops.time, ops.format);return Utils.parse(1, ops);} else if(type === 3){ // ymd转时间// var _t = +new Date(ops.aYmd[0]?ops.aYmd[0]:1970, ops.aYmd[1]?ops.aYmd[1]:0, ops.aYmd[2]?ops.aYmd[2]:0, ops.aYmd[3]?ops.aYmd[3]:0, ops.aYmd[4]?ops.aYmd[4]:0, ops.aYmd[5]?ops.aYmd[5]:0);// return {'value':Utils.format(_t, ops.format), 'time':_t} }};Utils.repair = function(num){ // 补0return (num < 10 ? '0' : '') + num;}Utils.each = function(list, fn){var i=0,len=list.length;for (; i<len; i++) {if(fn(i, list[i]) === false)break;};}Utils.check = function(_ymd, _minArr, _maxArr){return maketime(_ymd, _minArr) < maketime(_minArr) || maketime(_ymd, _maxArr) > maketime(_maxArr)function maketime(arr, _arr){if(!_arr) _arr = [1970, 1, 1, 0, 0, 0];return +new Date(n(arr[0], _arr[0]), n(arr[1], _arr[1])-1, n(arr[2], _arr[2]), n(arr[3], _arr[3]), n(arr[4], _arr[4]), n(arr[5], _arr[5]));}function n(a, b){return a === undefined ? (b === undefined ? 0 : b) : a;}}Utils.scroll = function(isLeft){var type = isLeft ? 'scrollLeft' : 'scrollTop';return document.body[type] | document.documentElement[type];};// -- 组件对象 -- //var dpdate = function(options){var that = this;this.config = {format: 'YYYY-MM-DD', // 日期格式min: '1970-01-01 00:00:00', // 最小日期max: '2099-12-12 23:59:59', // 最大日期 eventtype : '',elemName: '',hasTime: true, // 显示使用时间组件hasClear: true, // 显示清空按钮hasToday: true, // 显示今天按钮hasConfirm: true, // 显示确认按钮fixed: false, // 是否fixed浮动callBack: null // 选时间回调};Utils.extend(this.config, options);this.config.min = this.parse(this.config.min, 'YYYY-MM-DD') + ' 00:00:00'this.config.max = this.parse(this.config.max, 'YYYY-MM-DD') + ' 23:59:59'this.elem = document.getElementById(this.config.elemName)if(!this.elem){throw new Error('ID选择器找不到元素');}var valueType = /textarea|input/.test(this.elem.tagName.toLocaleLowerCase()) ? 'value' : 'innerHTML';this.getExg(); // 获取value合法性正则this.check(this.elem[valueType]); // 检查当前输入框的值 重置ymdUtils.on(this.elem, this.eventtype || 'click', function(e){that.check(that.elem[valueType]);DateView.redraw(that, valueType);})};dpdate.prototype.setMinScope = function(str, tar){this.config.min = str;if(tar && typeof str === 'number'){this.config.min = Utils.format(str + tar*86400000, this.config.format)}}dpdate.prototype.setMaxScope = function(str, tar){this.config.max = str;if(tar && typeof str === 'number'){this.config.max = Utils.format(str + tar*86400000, this.config.format)}}dpdate.prototype.getExg = function(){ // 制作验证正则 对应年月日位置this.aYmdIndex = new Array(6);var that = this;var i = 0;var reg = this.config.format.replace(/YYYY|MM|DD|hh|mm|ss/g, function(str, index){var exg = '';if (str === 'YYYY') {exg += '((19|20)\\\d{2})';that.aYmdIndex[0] = i;} else if (str === 'MM') {exg += '(0?[1-9]|1[0-2])'that.aYmdIndex[1] = i;} else if (str === 'DD') {exg += '(0?[1-9]|[1-3][0-9])'that.aYmdIndex[2] = i;} else if (str === 'hh') {exg += '\\\d{2}'that.aYmdIndex[3] = i;} else if (str === 'mm') {exg += '\\\d{2}'that.aYmdIndex[4] = i;} else if (str === 'ss') {exg += '\\\d{2}'that.aYmdIndex[5] = i;}i++;return exg;}); this.reg = new RegExp('^'+reg+'$')}dpdate.prototype.check = function(_value){ // 检查value合法性，转化时间ymdthis.aYmd = this.reg.test(_value) ? Utils.parse(1, {aYmdIndex: this.aYmdIndex, value: _value}) :Utils.parse(2, {aYmdIndex: this.aYmdIndex, value: _value, format: 'YYYY-MM-DD', time: +new Date})}dpdate.prototype.parse = function(time, format){if(typeof time === 'string') return time;return Utils.format(time < 86400000 ? +new Date + time*86400000 : time, format || 'YYYY-MM-DD')}// -- 日历视图对象 -- //var DateView = {dom: null,firstRedraw: false,_init: function(){ // 骨架this.dom = document.createElement('div');this.dom.className = 'datepicker-sh';this.dom.innerHTML = '<div class="dp_top">'+'<div class="dp_box box1" id="box1">'+'<a href="javascript:;" class="dp_prevX"></a>'+'<div class="dp_year">'+'<span class="dp_year_val"><span class="val">2015</span>年</span>'+'<span class="dp_down dp_year_next"></span>'+'<div class="dp_year_listBox">'+'<a href="javascript:;" class="dp_prevY"></a>'+'<ul class="dp_year_list"></ul>'+'<a href="javascript:;" class="dp_nextY"></a>'+'</div>'+'</div>'+'<a href="javascript:;" class="dp_nextX"></a>'+'</div>'+'<div class="dp_box box2" id="box2">'+'<a href="javascript:;" class="dp_prevX"></a>'+'<div class="dp_month">'+'<span class="dp_month_val"><span class="val">1</span>月</span>'+'<span class="dp_down dp_month_next"></span>'+'<div class="dp_month_listBox"><ul class="dp_month_list"></ul></div>'+'</div>'+'<a href="javascript:;" class="dp_nextX"></a>'+'</div>'+'</div>'+'<div class="db_body">'+'<ul class="db_li db_week"><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>'+'<ul class="db_li db_day"></ul>'+'</div>'+'<div class="dp_bottom">'+'<div class="dp_time">'+'<span class="dp_timefont">时间</span>'+'<ul class="dp_time_box"><li><input type="text" value="00" class="hh">:</li><li><input type="text" value="00" class="mm">:</li><li><input type="text" value="00" class="ss"></li></ul>'+'</div>'+'<div class="dp_btns"><a href="javascript:;" class="dp_btn clear">清空</a><a href="javascript:;" class="dp_btn dp_cl_r today">今天</a><a href="javascript:;" class="dp_btn dp_cl_r ok">确认</a></div>'+'<div class="dp_timebox dp_60"><div class="dp_head"><span class="db_title">秒</span><i class="db_close">×</i></div><ul class="db_time_list"></ul></div>'+'</div>';this._findDom(); // 找元素this._events(); // 事件委托},_findDom: function(){var dom = this.dom;var box1 = getDomByCls(dom, 'box1');var box2 = getDomByCls(dom, 'box2');this.doms = {yearBtn: getDomByCls(box1, 'dp_year'), //年按钮yearLeft: getDomByCls(box1, 'dp_prevX'), //上一年yearRight: getDomByCls(box1, 'dp_nextX'), //下一年yearInput: getDomByCls(box1, 'val'), //年inputyearListBox: getDomByCls(box1, 'dp_year_listBox'), //年列表盒子yearTop: getDomByCls(box1, 'dp_prevY'), //年上一页列表yearBottom: getDomByCls(box1, 'dp_nextY'), //年下一页列表yearList: getDomByCls(box1, 'dp_year_list'), //年列表monthBtn: getDomByCls(box2, 'dp_month'), //月按钮monthLeft: getDomByCls(box2, 'dp_prevX'), //上一月monthRight: getDomByCls(box2, 'dp_nextX'), //下一月monthInput: getDomByCls(box2, 'val'), //月inputmonthListBox: getDomByCls(box2, 'dp_month_listBox'), //月列表盒子monthList: getDomByCls(box2, 'dp_month_list'), //月列表dayList: getDomByCls(dom, 'db_day'), //日列表timeBox: getDomByCls(dom, 'dp_time'), //时间组件inputH: getDomByCls(dom, 'hh'), //时inputinputM: getDomByCls(dom, 'mm'), //分inputinputS: getDomByCls(dom, 'ss'), //秒inputbtnBox: getDomByCls(dom, 'dp_btns'), //按钮组件clearBtn: getDomByCls(dom, 'clear'), //清空按钮todayBtn: getDomByCls(dom, 'today'), //今天按钮okBtn: getDomByCls(dom, 'ok'), //确认按钮timeListBox: getDomByCls(dom, 'dp_timebox'), //时间列表盒timeListTitle: getDomByCls(dom, 'db_title'), //时间列表标题timeListClose: getDomByCls(dom, 'db_close'), //时间列表关闭timeList: getDomByCls(dom, 'db_time_list') //时间列表}function getDomByCls(dom, name){return dom.getElementsByClassName(name)[0];}},redraw: function(_obj, _valueType){ // 更新骨架内容this.dateObj = _obj;var _aYmd = _obj.aYmd, _config = _obj.config, _elem = _obj.elem;if(!this.firstRedraw){this.firstRedraw = true;document.body.appendChild(this.dom)}// 引用更新对象this.aYmd = _aYmd; this.config = _config;this.elem = _elem;this.valueType = _valueType;this.maxArr = _config.max.match(/\d+/g);this.minArr = _config.min.match(/\d+/g);// 记录当前选择时间this.Y = _aYmd[0] ? parseInt(_aYmd[0]) : 1970;this.M = _aYmd[1] ? parseInt(_aYmd[1]) : 1;this.D = _aYmd[2] ? parseInt(_aYmd[2]) : 1;this.h = _aYmd[3] ? parseInt(_aYmd[3]) : 0;this.m = _aYmd[4] ? parseInt(_aYmd[4]) : 0;this.s = _aYmd[5] ? parseInt(_aYmd[5]) : 0;this.doms.yearInput.innerHTML = _aYmd[0];this.doms.monthInput.innerHTML = _aYmd[1];this._drawDate(this.Y, this.M, this.D);Utils.isShow(this.doms.timeBox, _config.hasTime);this.doms.inputH.value = _aYmd[3] ? _aYmd[3] : '00';this.doms.inputM.value = _aYmd[4] ? _aYmd[4] : '00';this.doms.inputS.value = _aYmd[5] ? _aYmd[5] : '00';// 显示组件Utils.isShow(this.doms.clearBtn, _config.hasClear);Utils.isShow(this.doms.todayBtn, _config.hasToday);Utils.isShow(this.doms.okBtn, _config.hasConfirm);this._close(true)// 定位组件this._position(_elem, _config.fixed)},_checkDate: function(_ymd){return Utils.check(_ymd, this.minArr, this.maxArr)},_checkOk: function(){ // 根据范围控制确认按钮可点if(this._checkDate([this.Y, this.M, this.D, this.h, this.m, this.s])){this.doms.okBtn.setAttribute('dis', 'yes');this.doms.okBtn.className = 'dp_btn dp_cl_r dis'}else{this.doms.okBtn.setAttribute('dis', '');this.doms.okBtn.className = 'dp_btn dp_cl_r ok'}},_events: function(){//绑定事件找元素var _this = this,yearPage = 0,hmsType='';// vm自动 (NO IE8)// var year = this.Y;// Object.defineProperty(this, "Y", {// get: function(){return year; },// set: function(val){year = val; _this.doms.yearInput.innerHTML=val }// })// 绑定选年事件（左右 显示列表及点击 更新日历）Utils.on(this.doms.yearLeft, 'click', function(e){if(_this._checkDate([_this.Y - 1])) return false_this.doms.yearInput.innerHTML = --_this.Y;_this._closelayer()._drawDate()._checkOk();});Utils.on(this.doms.yearRight, 'click', function(e){if(_this._checkDate([_this.Y + 1])) return false_this.doms.yearInput.innerHTML = ++_this.Y;_this._closelayer()._drawDate()._checkOk();});Utils.on(this.doms.yearBtn, 'click', function(e){yearPage = 0;_this._closelayer()._drawYearList(yearPage);Utils.isShow(_this.doms.yearListBox, true);});Utils.on(this.doms.yearTop, 'click', function(e){_this._drawYearList(--yearPage);});Utils.on(this.doms.yearBottom, 'click', function(e){_this._drawYearList(++yearPage);});Utils.on(this.doms.yearList, 'click', 'li', function(e){if(this.getAttribute('dis')){e.stopPropagation()return false}_this.doms.yearInput.innerHTML = _this.Y = parseInt(this.innerHTML);_this._closelayer()._drawDate()._checkOk();});// 绑定选月事件（左右 显示列表及点击 更新日历）Utils.on(this.doms.monthLeft, 'click', function(e){if(_this._checkDate([_this.Y, _this.M - 1])) return falseif(--_this.M < 1) {_this.M = 12;_this.doms.yearInput.innerHTML = --_this.Y;}_this.doms.monthInput.innerHTML = _this.M;_this._closelayer()._drawDate()._checkOk();});Utils.on(this.doms.monthRight, 'click', function(e){if(_this._checkDate([_this.Y, _this.M + 1])) return falseif(++_this.M > 12) {_this.M = 1;_this.doms.yearInput.innerHTML = ++_this.Y;}_this.doms.monthInput.innerHTML = _this.M;_this._closelayer()._drawDate()._checkOk();});Utils.on(this.doms.monthBtn, 'click', function(e){_this._closelayer()._drawMonthList();Utils.isShow(_this.doms.monthListBox, true);});Utils.on(this.doms.monthList, 'click', 'li', function(e){if(this.getAttribute('dis')){e.stopPropagation()return false}_this.doms.monthInput.innerHTML = _this.M = parseInt(this.innerHTML);_this._closelayer()._drawDate()._checkOk();});// 选天Utils.on(this.doms.dayList, 'click', 'li', function(e){if(this.getAttribute('dis')){e.stopPropagation()return false}_this.M = this.getAttribute('m');_this.D = parseInt(this.innerHTML);_this.selectDate()._checkOk();DateView._close();});// 绑定时分秒（显示列表及点击）Utils.on(this.doms.timeListBox, 'click', function(e){});Utils.on(this.doms.inputH, 'click', function(e){hmsType = 'H';_this._drawTimeList(hmsType)});Utils.on(this.doms.inputM, 'click', function(e){hmsType = 'M';_this._drawTimeList(hmsType)});Utils.on(this.doms.inputS, 'click', function(e){hmsType = 'S';_this._drawTimeList(hmsType)});Utils.on(this.doms.timeListClose, 'click', function(e){_this._closelayer()});Utils.on(this.doms.timeList, 'click', 'li', function(e){if(this.getAttribute('dis')){e.stopPropagation()return false}var it = parseInt(this.innerHTML);_this[hmsType.toLocaleLowerCase()] = it;_this.doms['input'+hmsType].value = Utils.repair(it);_this._closelayer()._drawDate()._checkOk()});// 绑定tools按钮Utils.on(this.doms.clearBtn, 'click', function(e){_this._close().elem[_this.valueType] = '';});Utils.on(this.doms.todayBtn, 'click', function(e){var _de = new Date();_this.Y = _de.getFullYear();_this.M = _de.getMonth()+1;_this.D = _de.getDate();_this.selectDate()});Utils.on(this.doms.okBtn, 'click', function(e){if(this.getAttribute('dis')){e.stopPropagation()return false}_this.selectDate()});//点击body关闭组件Utils.on(document, 'click', function(e){_this._closelayer()DateView._close();});Utils.on(this.dom, 'click', function(e){_this._closelayer()});},_drawYearList: function(p){var _html='',yearRow = 12,that=this;var _start = yearRow/2-1;Utils.each(new Array(yearRow), function(i){var y = that.Y-_start+i+p*yearRow;_html += that._checkDate([y]) ? '<li dis="yes">'+y+'</li>' : '<li class="normal">'+y+'</li>';})this.doms.yearList.innerHTML = _html;return this;},_drawMonthList: function(){var _html='',that=this;Utils.each(new Array(12), function(i){_html += that._checkDate([that.Y, i+1]) ? '<li dis="yes">'+Utils.repair(i+1)+'</li>' :'<li class="normal">'+Utils.repair(i+1)+'</li>'})this.doms.monthList.innerHTML = _html;return this;},_drawDate: function(){var date1,date2,date3,date,dateP,dateT,dayP,_date,_html='',j=0,_time=0,_timeMin,_timeMax;date = new Date();date1 = new Date(this.Y, this.M-1, 0);date2 = new Date(this.Y, this.M, 0);date3 = new Date(this.Y, this.M-1, 1);dateP = date1.getDate(); // 上个月多少天dateT = date2.getDate(); // 这个月多少天dayP = date3.getDay(); // 1号星期几_date = Math.min(dateT, this.D)for (var i = 1; i <= 42; i++) {if(i <= dayP){_html += this._checkDate([this.Y, this.M-1, dateP-dayP+i, this.h, this.m, this.s]) ? '<li dis="yes" m="'+(this.M-1)+'">'+(dateP-dayP+i)+'</li>' : '<li class="other" m="'+(this.M-1)+'">'+(dateP-dayP+i)+'</li>';}else if(i <= dayP + dateT){var _de = i-dayP;var _cls = _de === _date ? 'on' : 'normal';_html += this._checkDate([this.Y, this.M, _de, this.h, this.m, this.s]) ? '<li dis="yes" m="'+this.M+'">'+(_de)+'</li>' : '<li class="'+_cls+'" m="'+this.M+'">'+(_de)+'</li>';}else{_html += this._checkDate([this.Y, this.M+1, j+1, this.h, this.m, this.s]) ? '<li dis="yes" m="'+(this.M+1)+'">'+(++j)+'</li>' : '<li class="other" m="'+(this.M+1)+'">'+(++j)+'</li>';}};this.doms.dayList.innerHTML = _html;return this;},_drawTimeList: function(type){var kv = {'H': {n:'时', c: 24, e:'h', i: 3}, 'M': {n:'分', c: 60, e:'m', i: 4}, 'S': {n:'秒', c: 60, e:'s', i: 5}},_html='',that=this;var arr = [that.Y, that.M, that.D, that.h, that.m, that.s];Utils.each(new Array(kv[type].c), function(i){var _cls = that[kv[type].e.toLocaleLowerCase()] === i ? 'on' : 'normal';arr[kv[type].i] = i;_html += that._checkDate(arr) ? '<li dis="yes">'+i+'</li>' : '<li class="'+_cls+'">'+i+'</li>';});this.doms.timeListBox.className = 'dp_timebox dp_'+kv[type].c;this.doms.timeListTitle.innerHTML = kv[type].n;this.doms.timeList.innerHTML = _html;Utils.isShow(this.doms.timeListBox, true);},_closelayer: function(){Utils.isShow(this.doms.yearListBox, false);Utils.isShow(this.doms.monthListBox, false);Utils.isShow(this.doms.timeListBox, false);return this;},_position: function(elem, isFixed){this.dom.style.position = isFixed ? 'fixed' : 'absolute'var rect = elem.getBoundingClientRect();this.dom.style.left = rect.left + (isFixed ? Utils.scroll(true) : 0) + 'px'if(rect.bottom + this.dom.offsetHeight < document.documentElement.clientHeight){this.dom.style.top = rect.bottom + (isFixed ? Utils.scroll() : 0) + 'px'}else{this.dom.style.top = Math.max(rect.top - document.documentElement.clientHeight + (isFixed ? Utils.scroll() : 0), 0) + 'px';}},selectDate: function(){this.aYmd[0] = Utils.repair(this.Y);this.aYmd[1] = Utils.repair(this.M);this.aYmd[2] = Utils.repair(this.D);this.aYmd[3] = Utils.repair(this.h);this.aYmd[4] = Utils.repair(this.m);this.aYmd[5] = Utils.repair(this.s);var time = +new Date(this.Y, this.M-1, this.D, this.h, this.m, this.s);this.elem[this.valueType] = Utils.format(time, this.config.format)this.config.callBack(this.elem[this.valueType], time);this.dateObj.time = time;this.dateObj.value = this.elem[this.valueType];this._close();return this;},_close: function(noclose){this.dom.style.display = noclose ? 'block' : 'none';return this;}}DateView._init();return dpdate
})();css代码：
/*dol-datepicker 0.1.0 <https://github.com/dolphin0618/dol-datepicker>shanghang 2017-12-12
*/
.datepicker-sh {width: 15pc;background: #fff;border: 1px solid #ccc;font-size: 9pt;display: none;z-index: 999
}.datepicker-sh .dp_top {height: 26px;padding: 5px;background: #12a5f8
}.datepicker-sh .dp_box {float: left
}.datepicker-sh .box1 {width: 90pt
}.datepicker-sh .box2 {width: 75pt;margin-left: 10px
}.datepicker-sh .dp_nextX,
.datepicker-sh .dp_prevX {width: 20px;height: 26px;float: left;position: relative
}.datepicker-sh .dp_nextX:hover,
.datepicker-sh .dp_prevX:hover {background-color: #12b5f8
}.datepicker-sh .dp_nextX:after,
.datepicker-sh .dp_prevX:after {content: '';display: block;border: 5px solid transparent;position: absolute;top: 8px;left: 5px
}.datepicker-sh .dp_prevX:after {border-right-color: #fff
}.datepicker-sh .dp_nextX:after {border-left-color: #fff
}.datepicker-sh .dp_month,
.datepicker-sh .dp_year {width: 5pc;height: 26px;float: left;position: relative;cursor: pointer
}.datepicker-sh .dp_year_val {position: absolute;left: 4px;top: 4px;color: #fff;font-size: 14px
}.datepicker-sh .dp_down {border: 5px solid transparent;border-top-color: #fff;position: absolute;right: 8px;top: 9pt
}.datepicker-sh .dp_month_listBox,
.datepicker-sh .dp_year_listBox {width: 90pt;position: absolute;top: 30px;overflow: hidden;background: #12a5f8;display: none;z-index: 1
}.datepicker-sh .dp_year_listBox {left: -25px
}.datepicker-sh .dp_nextY,
.datepicker-sh .dp_prevY {display: block;height: 15px;overflow: hidden
}.datepicker-sh .dp_nextY:hover,
.datepicker-sh .dp_prevY:hover {background: #12b5f8
}.datepicker-sh .dp_prevY:after {content: '';display: block;width: 0;border: 5px solid transparent;border-bottom-color: #fff;margin: 0 auto
}.datepicker-sh .dp_nextY:after {content: '';display: block;width: 0;border: 5px solid transparent;border-top-color: #fff;margin: 5px auto
}.datepicker-sh .dp_year_list {overflow: hidden
}.datepicker-sh .dp_year_list li {width: 60px;line-height: 20px;float: left;text-align: center;color: #ccc;cursor: default
}.datepicker-sh .dp_month {width: 60px
}.datepicker-sh .dp_month_val {position: absolute;left: 9pt;top: 5px;color: #fff
}.datepicker-sh .dp_month_listBox {width: 75pt;left: -15px
}.datepicker-sh .dp_month_list li {width: 50px;line-height: 29px;float: left;text-align: center;color: #ccc;cursor: default
}.datepicker-sh .dp_month_list li.normal,
.datepicker-sh .dp_year_list li.normal {color: #fff;cursor: pointer
}.datepicker-sh .dp_month_list li.normal:hover,
.datepicker-sh .dp_year_list li.normal:hover {background: #12b5f8
}.datepicker-sh .db_body {height: 145px
}.datepicker-sh .db_li li {width: 34px;float: left;text-align: center;color: #eee;height: 20px;line-height: 20px
}.datepicker-sh .db_week {border-bottom: 1px solid #ccc;overflow: hidden;padding-left: 1px
}.datepicker-sh .db_week li {color: #12a5f8
}.datepicker-sh .db_day li.normal {color: #00a5f0
}.datepicker-sh .db_day li.other {color: #ccc
}.datepicker-sh .db_day li.normal:hover,
.datepicker-sh .db_day li.other:hover {background: #12b5f8;color: #fff;cursor: pointer
}.datepicker-sh .db_day li.on {background: #12a5f8;color: #fff
}.datepicker-sh .dp_bottom {height: 22px;padding: 5px;position: relative
}.datepicker-sh .dp_time {border: 1px solid #ccc;height: 20px;line-height: 20px;float: left
}.datepicker-sh .dp_timefont {float: left;padding: 0 5px
}.datepicker-sh .dp_cl_r,
.datepicker-sh .dp_time_box {float: left;border-left: 1px solid #ccc
}.datepicker-sh .dp_time_box li {float: left
}.datepicker-sh .dp_time_box input {width: 20px;text-align: center;border: none;outline: 0;cursor: pointer
}.datepicker-sh .dp_btns {border: 1px solid #ccc;float: right;height: 20px;line-height: 20px;text-align: center
}.datepicker-sh .dp_btn {width: 25px;display: block;float: left;color: #666;text-decoration: none;padding: 0 5px
}.datepicker-sh .dp_btn.dis {color: #ccc
}.datepicker-sh .dp_btn:hover {background: #eee
}.datepicker-sh .dp_timebox {width: 75pt;height: 75pt;background: #fff;position: absolute;bottom: 25px;border: 1px solid #ccc;display: none;z-index: 1
}.datepicker-sh .dp_timebox.dp_60 {width: 200px;height: 140px
}.datepicker-sh .dp_timebox.dp_24 {width: 125px;height: 105px
}.datepicker-sh .dp_head {line-height: 20px;border-bottom: 1px solid #ccc;position: relative;text-align: center;color: #12a5f8
}.datepicker-sh .db_close {position: absolute;right: 5px;font-style: normal;cursor: pointer
}.datepicker-sh .dp_timebox ul li {float: left;width: 20px;text-align: center;line-height: 20px;color: #eee
}.datepicker-sh .dp_timebox ul li.on {background: #12a5f8;color: #fff;cursor: pointer
}.datepicker-sh .dp_timebox ul li.normal {color: #12a5f8;cursor: pointer
}.datepicker-sh .dp_timebox ul li.normal:hover {background: #12b5f8;color: #fff
}
js原生写时间日期选择相关推荐
- js原生时间日期选择
纯手工原生js写法(不带其他任何框架) html文件: <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...
- 闲云旅游项目开发-（第四篇：机票首页/机票搜索功能（`el-autocomplete`远程搜索组件）/moment.js的使用/日期选择组件el-date-picker）
目录 相关组件介绍 一 机票首页布局 二 封装搜索组件 1. 组件布局 2.目标思路 3.步骤 3.1 基本功能 3.2 自动补全 3.3获取真正的推荐数据 3.4 添加城市代号 3.5 处理日期格式 ...
- 【2017-05-19】WebForm复合控件、用DropDownList实现时间日期选择。
自动提交的属性: AutoPostBack="True" 1.RadioButtonList 单选集合 -属性:RepeatDirection:Vertical (垂直排布 ...
- 原生js实现日期选择器插件 简单风格日期选择插件
原生js实现日期选择插件 xs-DatePicker ** 效果图 ** ** 简介 通过原生HTML/CSS/JavaScript完成一个日期选择器. 代码如下: ** <!-- 时间:202 ...
- html实现两个箭头向左向右,原生JS实现左右箭头选择日期实例代码
原生JS实现左右箭头选择日期实例代码 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现左右箭头选择日期实例代码,编程之家小编觉得 ...
- js 跨域的问题 （同一个主域名不同的二级域名下的跨域问题） 解决 WdatePicker.js my97日期选择控件
js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件 参考文章: (1)js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) ...
- [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)
前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件 ==> "2. 每年的周数从(1-52), 如果超 ...
- [Ext JS 4] 实战之 带week(星期)的日期选择控件(二)
前言 JavaScript 中的日期和时间 [Ext JS 4] 实战之 带week(星期)的日期选择控件(一) 如对本篇的一些预备知识需详尽了解,可参考以上两篇. Javascript 有提供Dat ...
- [Ext JS 4] 实战之 带week(星期)的日期选择控件
前言 Ext JS 3 和 Ext JS 4中都有提供日期选择的组件(当然早期版本也有). 但是有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周. 遗憾的是Ext js 并没有提供 ...
最新文章
- mysql基于init-connect+binlog完成审计功能
- 使用IntelliJ IDEA看源码的时候，如何在优雅的查看类继承关系...【看这篇就够了】
- 一层循环时间复杂度_数据结构：二叉排序树的前/中/后序遍历（递归与循环两种版本)...
- python中最难的是什么_python什么的最难了
- Mac超强扒站神器——SiteSucker Pro 4.3.3 mac中英文
- 东莞华勤通讯软件测试怎么样,【社招】华勤通讯NBD测试验证部急聘岗位-东莞...
- php创建多级目录函数,php创建多层(多级)目录的函数
- 春招冷淡，跳槽无望？
- Fiddler工具使用介绍三
- 1.XML的基础和DOCTYPE字段的解析 DTD——文档类型定义(Document Type Definition)/ 由于XML可以自定义标签,那么自然各人编写的标签不一样,这样同步数据便成了问
- Unity3D AI：导航系统-导航网格生成
- 什么是CANFD Light
- 锂电池电芯-市场现状及未来发展趋势
- Transformer-M：一个能理解2D和3D分子的Transformer
- Photoshop CC 2017工具的使用
- excel自动排班表_最火8套建筑工程测量计算表，傻瓜式操作，自动计算出结果，速领...
- vnr光学识别怎么打开_小区安装家用防盗报警系统方案
- 计算机网络（5）体系结构：计算机网络分层结构
- 互联网摸鱼日报（2022-12-17）
- Python基础之数据类型II