添加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]
|
||||
|
||||
,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){
|
||||
|
|
@ -391,6 +391,7 @@
|
|||
,zIndex: null //控件层叠顺序
|
||||
,done: null //控件选择完毕后的回调，点击清空/现在/确定也均会触发
|
||||
,change: null //日期时间改变后的回调
|
||||
,shortcuts: null // 快捷方式
|
||||
};
|
||||
|
||||
//多语言
|
||||
|
|
@ -443,7 +444,6 @@
|
|||
,time: 'HH:mm:ss'
|
||||
,datetime: 'yyyy-MM-dd HH:mm:ss'
|
||||
};
|
||||
|
||||
options.elem = lay(options.elem);
|
||||
options.eventElem = lay(options.eventElem);
|
||||
|
||||
|
|
@ -581,6 +581,11 @@
|
|||
,elemCont = that.elemCont = []
|
||||
,elemTable = that.table = []
|
||||
|
||||
//侧边快捷方式区域
|
||||
,divSide = that.side = lay.elem('div', {
|
||||
'class': ELEM_SIDE
|
||||
})
|
||||
|
||||
//底部区域
|
||||
,divFooter = that.footer = lay.elem('div', {
|
||||
'class': ELEM_FOOTER
|
||||
|
|
@ -673,6 +678,18 @@
|
|||
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(){
|
||||
var html = [], btns = [];
|
||||
|
|
@ -688,7 +705,13 @@
|
|||
html.push('<div class="laydate-footer-btns">'+ btns.join('') +'</div>');
|
||||
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){
|
||||
elem.appendChild(main);
|
||||
|
|
@ -1772,6 +1795,24 @@
|
|||
var type = lay(this).attr('lay-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;
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
//是否输入框
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
}
|
||||
|
||||
.laydate-icon{
|
||||
font-family:"laydate-icon" !important;
|
||||
font-family: "laydate-icon" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -25,12 +25,14 @@
|
|||
|
||||
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{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-header *,
|
||||
.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::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 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 .layui-laydate-main{display: inline-block; vertical-align: middle;}
|
||||
/* .layui-laydate-range{width: 676px;} */
|
||||
.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-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 .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-header{border-bottom: 1px solid #e2e2e2;}
|
||||
|
|
|
|||
Loading…
Reference in New Issue