添加datetime左侧快捷方式功能，类似elementUI的那种
xiaojun1994
parent
bfc0c1bf6d
commit
d570cad636
|
|
@ -0,0 +1,76 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>使用 layDate 独立版</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<input type="text" id="test1">
|
||||||
|
<script src="./src/laydate.js"></script>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
* 根据时间戳格式化时间
|
||||||
|
*/
|
||||||
|
const dateFormat = function(timestamp, fmt = "yyyy-MM-dd hh:mm:ss") {
|
||||||
|
const date = new Date(timestamp);
|
||||||
|
const o = {
|
||||||
|
"M+": date.getMonth() + 1, //月份
|
||||||
|
"d+": date.getDate(), //日
|
||||||
|
"h+": date.getHours(), //小时
|
||||||
|
"m+": date.getMinutes(), //分
|
||||||
|
"s+": date.getSeconds(), //秒
|
||||||
|
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
|
||||||
|
S: date.getMilliseconds() //毫秒
|
||||||
|
};
|
||||||
|
if (/(y+)/.test(fmt))
|
||||||
|
fmt = fmt.replace(
|
||||||
|
RegExp.$1,
|
||||||
|
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
|
||||||
|
);
|
||||||
|
for (let k in o)
|
||||||
|
if (new RegExp("(" + k + ")").test(fmt))
|
||||||
|
fmt = fmt.replace(
|
||||||
|
RegExp.$1,
|
||||||
|
RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
|
||||||
|
);
|
||||||
|
return fmt;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test1'
|
||||||
|
,type: 'datetime'
|
||||||
|
,range: true
|
||||||
|
,shortcuts: [
|
||||||
|
{
|
||||||
|
text: '今天',
|
||||||
|
onClick(inst) {
|
||||||
|
var startDate = new Date();
|
||||||
|
var endDate = new Date();
|
||||||
|
inst.setValue(dateFormat(startDate, "yyyy-MM-dd 00:00:00") + " - " + dateFormat(endDate, "yyyy-MM-dd 23:59:59"));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '最近三天',
|
||||||
|
onClick(inst) {
|
||||||
|
var startDate = new Date();
|
||||||
|
startDate.setDate(startDate.getDate() - 2);
|
||||||
|
var endDate = new Date();
|
||||||
|
inst.setValue(dateFormat(startDate, "yyyy-MM-dd 00:00:00") + " - " + dateFormat(endDate, "yyyy-MM-dd 23:59:59"));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '最近一周',
|
||||||
|
onClick(inst) {
|
||||||
|
var startDate = new Date();
|
||||||
|
startDate.setDate(startDate.getDate() - 6);
|
||||||
|
var endDate = new Date();
|
||||||
|
inst.setValue(dateFormat(startDate, "yyyy-MM-dd 00:00:00") + " - " + dateFormat(endDate, "yyyy-MM-dd 23:59:59"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
@ -101,7 +101,7 @@
|
||||||
//字符常量
|
//字符常量
|
||||||
,MOD_NAME = 'laydate', ELEM = '.layui-laydate', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'laydate-disabled', TIPS_OUT = '开始日期超出了结束日期<br>建议重新选择', LIMIT_YEAR = [100, 200000]
|
,MOD_NAME = 'laydate', ELEM = '.layui-laydate', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'laydate-disabled', TIPS_OUT = '开始日期超出了结束日期<br>建议重新选择', LIMIT_YEAR = [100, 200000]
|
||||||
|
|
||||||
,ELEM_STATIC = 'layui-laydate-static', ELEM_LIST = 'layui-laydate-list', ELEM_SELECTED = 'laydate-selected', ELEM_HINT = 'layui-laydate-hint', ELEM_PREV = 'laydate-day-prev', ELEM_NEXT = 'laydate-day-next', ELEM_FOOTER = 'layui-laydate-footer', ELEM_CONFIRM = '.laydate-btns-confirm', ELEM_TIME_TEXT = 'laydate-time-text', ELEM_TIME_BTN = '.laydate-btns-time'
|
,ELEM_STATIC = 'layui-laydate-static', ELEM_LIST = 'layui-laydate-list', ELEM_SELECTED = 'laydate-selected', ELEM_HINT = 'layui-laydate-hint', ELEM_PREV = 'laydate-day-prev', ELEM_NEXT = 'laydate-day-next', ELEM_SIDE = 'layui-laydate-side', ELEM_FOOTER = 'layui-laydate-footer', ELEM_CONFIRM = '.laydate-btns-confirm', ELEM_TIME_TEXT = 'laydate-time-text', ELEM_TIME_BTN = '.laydate-btns-time'
|
||||||
|
|
||||||
//组件构造器
|
//组件构造器
|
||||||
,Class = function(options){
|
,Class = function(options){
|
||||||
|
|
@ -391,6 +391,7 @@
|
||||||
,zIndex: null //控件层叠顺序
|
,zIndex: null //控件层叠顺序
|
||||||
,done: null //控件选择完毕后的回调，点击清空/现在/确定也均会触发
|
,done: null //控件选择完毕后的回调，点击清空/现在/确定也均会触发
|
||||||
,change: null //日期时间改变后的回调
|
,change: null //日期时间改变后的回调
|
||||||
|
,shortcuts: null // 快捷方式
|
||||||
};
|
};
|
||||||
|
|
||||||
//多语言
|
//多语言
|
||||||
|
|
@ -443,7 +444,6 @@
|
||||||
,time: 'HH:mm:ss'
|
,time: 'HH:mm:ss'
|
||||||
,datetime: 'yyyy-MM-dd HH:mm:ss'
|
,datetime: 'yyyy-MM-dd HH:mm:ss'
|
||||||
};
|
};
|
||||||
|
|
||||||
options.elem = lay(options.elem);
|
options.elem = lay(options.elem);
|
||||||
options.eventElem = lay(options.eventElem);
|
options.eventElem = lay(options.eventElem);
|
||||||
|
|
||||||
|
|
@ -581,6 +581,11 @@
|
||||||
,elemCont = that.elemCont = []
|
,elemCont = that.elemCont = []
|
||||||
,elemTable = that.table = []
|
,elemTable = that.table = []
|
||||||
|
|
||||||
|
//侧边快捷方式区域
|
||||||
|
,divSide = that.side = lay.elem('div', {
|
||||||
|
'class': ELEM_SIDE
|
||||||
|
})
|
||||||
|
|
||||||
//底部区域
|
//底部区域
|
||||||
,divFooter = that.footer = lay.elem('div', {
|
,divFooter = that.footer = lay.elem('div', {
|
||||||
'class': ELEM_FOOTER
|
'class': ELEM_FOOTER
|
||||||
|
|
@ -673,6 +678,18 @@
|
||||||
elemTable.push(table);
|
elemTable.push(table);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//生成侧边快捷方式
|
||||||
|
lay(divSide).html(function(){
|
||||||
|
var ul = lay.elem('ul');
|
||||||
|
|
||||||
|
lay.each(options.shortcuts, function(i, item){
|
||||||
|
var li = lay.elem("li");
|
||||||
|
li.innerHTML = item.text;
|
||||||
|
ul.appendChild(li);
|
||||||
|
});
|
||||||
|
return ul.outerHTML;
|
||||||
|
}());
|
||||||
|
|
||||||
//生成底部栏
|
//生成底部栏
|
||||||
lay(divFooter).html(function(){
|
lay(divFooter).html(function(){
|
||||||
var html = [], btns = [];
|
var html = [], btns = [];
|
||||||
|
|
@ -688,7 +705,13 @@
|
||||||
html.push('<div class="laydate-footer-btns">'+ btns.join('') +'</div>');
|
html.push('<div class="laydate-footer-btns">'+ btns.join('') +'</div>');
|
||||||
return html.join('');
|
return html.join('');
|
||||||
}());
|
}());
|
||||||
|
(options.type === "date"
|
||||||
|
|| options.type === "datetime"
|
||||||
|
|| options.type === "year"
|
||||||
|
|| options.type === "month")
|
||||||
|
&& options.range
|
||||||
|
&& options.shortcuts
|
||||||
|
&& elem.appendChild(divSide);
|
||||||
//插入到主区域
|
//插入到主区域
|
||||||
lay.each(elemMain, function(i, main){
|
lay.each(elemMain, function(i, main){
|
||||||
elem.appendChild(main);
|
elem.appendChild(main);
|
||||||
|
|
@ -1772,6 +1795,24 @@
|
||||||
var type = lay(this).attr('lay-type');
|
var type = lay(this).attr('lay-type');
|
||||||
that.tool(this, type);
|
that.tool(this, type);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//点击快捷方式
|
||||||
|
lay(that.side).find('li').on('click', function(ev){
|
||||||
|
var ul = this.parentNode;
|
||||||
|
var list = ul.children;
|
||||||
|
var cb;
|
||||||
|
for(var i = 0; i < list.length; i++){
|
||||||
|
if(list[i] === this){
|
||||||
|
cb = that.config.shortcuts[i].onClick;
|
||||||
|
if(typeof cb === "function") cb(that);
|
||||||
|
that.remove();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
//是否输入框
|
//是否输入框
|
||||||
|
|
|
||||||
|
|
@ -25,12 +25,14 @@
|
||||||
|
|
||||||
html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
|
html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
|
||||||
|
|
||||||
|
body{font-family: "PingFang SC";}
|
||||||
|
|
||||||
/* 初始化 */
|
/* 初始化 */
|
||||||
.layui-laydate *{margin: 0; padding: 0;}
|
.layui-laydate *{margin: 0; padding: 0; font-size: 14px;}
|
||||||
|
|
||||||
/* 主体结构 */
|
/* 主体结构 */
|
||||||
.layui-laydate, .layui-laydate *{box-sizing: border-box;}
|
.layui-laydate, .layui-laydate *{box-sizing: border-box;}
|
||||||
.layui-laydate{position: absolute; z-index: 66666666; margin: 5px 0; border-radius: 2px; font-size: 14px; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
|
.layui-laydate{position: absolute; z-index: 66666666; margin: 5px 0; border-radius: 0; font-size: 0; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
|
||||||
.layui-laydate-main{width: 272px;}
|
.layui-laydate-main{width: 272px;}
|
||||||
.layui-laydate-header *,
|
.layui-laydate-header *,
|
||||||
.layui-laydate-content td,
|
.layui-laydate-content td,
|
||||||
|
|
@ -81,6 +83,13 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
|
||||||
.laydate-day-mark{position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 30px; font-size: 12px; overflow: hidden;}
|
.laydate-day-mark{position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 30px; font-size: 12px; overflow: hidden;}
|
||||||
.laydate-day-mark::after{position: absolute; content:''; right: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50%;}
|
.laydate-day-mark::after{position: absolute; content:''; right: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50%;}
|
||||||
|
|
||||||
|
/* 侧边快捷方式 */
|
||||||
|
.layui-laydate-side{display: inline-block; width: 130px; height: 100%; padding: 10px 10px 10px 15px; max-height: 276px; overflow-y: auto;}
|
||||||
|
.layui-laydate-side ul{list-style-type: none;}
|
||||||
|
.layui-laydate-side ul li{line-height: 26px; cursor: pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 13px; font-weight: bold;}
|
||||||
|
.layui-laydate-side ul li:hover{color: #5FB878;}
|
||||||
|
.layui-laydate-side ul li:active{color: #42a75e;}
|
||||||
|
|
||||||
/* 底部结构 */
|
/* 底部结构 */
|
||||||
.layui-laydate-footer{position: relative; height: 46px; line-height: 26px; padding: 10px 20px;}
|
.layui-laydate-footer{position: relative; height: 46px; line-height: 26px; padding: 10px 20px;}
|
||||||
.layui-laydate-footer span{margin-right: 15px; display: inline-block; cursor: pointer; font-size: 12px;}
|
.layui-laydate-footer span{margin-right: 15px; display: inline-block; cursor: pointer; font-size: 12px;}
|
||||||
|
|
@ -104,15 +113,15 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
|
||||||
|
|
||||||
|
|
||||||
/* 双日历 */
|
/* 双日历 */
|
||||||
.layui-laydate-range{width: 546px;}
|
/* .layui-laydate-range{width: 676px;} */
|
||||||
.layui-laydate-range .layui-laydate-main{display: inline-block; vertical-align: middle;}
|
.layui-laydate-range .layui-laydate-main{display: inline-block; vertical-align: top;}
|
||||||
|
.layui-laydate-range .layui-laydate-side + .laydate-main-list-0{border-left: 1px solid #e2e2e2;}
|
||||||
.layui-laydate-range .laydate-main-list-0 .laydate-next-m,
|
.layui-laydate-range .laydate-main-list-0 .laydate-next-m,
|
||||||
.layui-laydate-range .laydate-main-list-0 .laydate-next-y,
|
.layui-laydate-range .laydate-main-list-0 .laydate-next-y,
|
||||||
.layui-laydate-range .laydate-main-list-1 .laydate-prev-y,
|
.layui-laydate-range .laydate-main-list-1 .laydate-prev-y,
|
||||||
.layui-laydate-range .laydate-main-list-1 .laydate-prev-m{display: none;}
|
.layui-laydate-range .laydate-main-list-1 .laydate-prev-m{display: none;}
|
||||||
.layui-laydate-range .laydate-main-list-1 .layui-laydate-content{border-left: 1px solid #e2e2e2;}
|
.layui-laydate-range .laydate-main-list-1 .layui-laydate-content{border-left: 1px solid #e2e2e2;}
|
||||||
|
|
||||||
|
|
||||||
/* 默认简约主题 */
|
/* 默认简约主题 */
|
||||||
.layui-laydate, .layui-laydate-hint{border: 1px solid #d2d2d2; box-shadow: 0 2px 4px rgba(0,0,0,.12); background-color: #fff; color: #666;}
|
.layui-laydate, .layui-laydate-hint{border: 1px solid #d2d2d2; box-shadow: 0 2px 4px rgba(0,0,0,.12); background-color: #fff; color: #666;}
|
||||||
.layui-laydate-header{border-bottom: 1px solid #e2e2e2;}
|
.layui-laydate-header{border-bottom: 1px solid #e2e2e2;}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue