纯手工原生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">
// demo1
var picker1 = new Datepicker({
elemName: 'date1',
format: 'YYYY-MM-DD hh:mm:ss',
min: -4,
callBack: function(a, b){
console.log(a, b)
}
});
// demo2
var 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){ // 字符串转ymd
var 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){ // 当前时间转ymd
ops.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){ // 补0
return (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]); // 检查当前输入框的值 重置ymd
Utils.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合法性，转化时间ymd
this.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'), //年input
yearListBox: 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'), //月input
monthListBox: 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'), //时input
inputM: getDomByCls(dom, 'mm'), //分input
inputS: getDomByCls(dom, 'ss'), //秒input
btnBox: 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 false
if(--_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 false
if(++_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
}