From e1222cf891d2d8bd1532c5ea469dbbeb6793ddee Mon Sep 17 00:00:00 2001 From: sunxb <470459819@qq.com> Date: Fri, 16 Sep 2022 19:03:52 +0800 Subject: [PATCH] =?UTF-8?q?laydate=E6=96=B0=E5=A2=9E=E5=BF=AB=E6=8D=B7?= =?UTF-8?q?=E9=80=89=E9=A1=B9=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/modules/laydate.css | 10 ++++++++-- src/modules/laydate.js | 34 +++++++++++++++++++++++++++++----- 2 files changed, 37 insertions(+), 7 deletions(-) diff --git a/src/css/modules/laydate.css b/src/css/modules/laydate.css index 4881d37b..673a99ac 100644 --- a/src/css/modules/laydate.css +++ b/src/css/modules/laydate.css @@ -75,6 +75,11 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;} .laydate-footer-btns{position: absolute; right: 10px; top: 10px;} .laydate-footer-btns span{margin: 0 0 0 -1px;} +/* 快捷栏 */ +.layui-laydate-shortcut{width: 80px;display: inline-block;vertical-align: top;overflow: hidden;max-height: 276px;} +.layui-laydate-shortcut+.layui-laydate-main{border-left: 1px solid #e2e2e2;} +.layui-laydate-shortcut>li{padding: 6px;cursor: pointer;} + /* 年月列表 */ .layui-laydate-list{position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; background-color: #fff;} .layui-laydate-list>li{position: relative; display: inline-block; width: 33.3%; height: 36px; line-height: 36px; margin: 3px 0; vertical-align: middle; text-align: center; cursor: pointer;} @@ -108,7 +113,8 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;} .layui-laydate-content td.laydate-selected{background-color: #B5FFF8;} .laydate-selected:hover{background-color: #00F7DE !important;} .layui-laydate-content td>div:hover, -.layui-laydate-list li:hover{background-color: #eee; color: #333;} +.layui-laydate-list li:hover, +.layui-laydate-shortcut>li:hover{background-color: #eee; color: #333;} .laydate-time-list li ol{margin: 0; padding: 0; border: 1px solid #e2e2e2; border-left-width: 0;} .laydate-time-list li:first-child ol{border-left-width: 1px;} .laydate-time-list>li:hover{background: none;} @@ -169,4 +175,4 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;} .laydate-theme-fullpanel .laydate-time-show .layui-laydate-header .layui-icon, .laydate-theme-fullpanel .laydate-time-show .laydate-set-ym span[lay-type="year"], .laydate-theme-fullpanel .laydate-time-show .laydate-set-ym span[lay-type="month"] {display: inline-block !important;} -.laydate-theme-fullpanel .laydate-btns-time{display: none;} \ No newline at end of file +.laydate-theme-fullpanel .laydate-btns-time{display: none;} diff --git a/src/modules/laydate.js b/src/modules/laydate.js index 18b02945..f53eaf33 100644 --- a/src/modules/laydate.js +++ b/src/modules/laydate.js @@ -87,6 +87,7 @@ var ELEM_PREV = 'laydate-day-prev'; var ELEM_NEXT = 'laydate-day-next'; var ELEM_FOOTER = 'layui-laydate-footer'; + var ELEM_SHORTCUT = 'layui-laydate-shortcut'; var ELEM_NOW = '.laydate-btns-now' var ELEM_CONFIRM = '.laydate-btns-confirm'; var ELEM_TIME_TEXT = 'laydate-time-text'; @@ -413,6 +414,11 @@ //底部区域 ,divFooter = that.footer = lay.elem('div', { "class": ELEM_FOOTER + }) + + //快捷栏 + ,divShortcut = that.shortcut = lay.elem('ul', { + "class": ELEM_SHORTCUT }); if(options.zIndex) elem.style.zIndex = options.zIndex; @@ -521,6 +527,19 @@ html.push(''); return html.join(''); }()); + + //生成快捷键栏 + elem.appendChild(divShortcut); + lay(divShortcut).html(function () { + var shortcutBtns = []; + lay.each(options.shortcuts, function (i, item) { + shortcutBtns.push('
  • '+item.text+'
  • ') + }) + return shortcutBtns.join(''); + }()).find('li').on('click', function (event) { + lay(this.parentElement).find('li.layui-this').removeClass(THIS); + lay(this).addClass(THIS); + }) //插入到主区域 lay.each(elemMain, function(i, main){ @@ -529,11 +548,12 @@ options.showBottom && elem.appendChild(divFooter); //生成自定义主题 - var style; + var style = lay.elem('style'); var styleText = []; + var colorTheme; lay.each(options.theme, function (index, theme) { if(/^#/.test(theme)){ - style = style || lay.elem('style'); + colorTheme = true; styleText.push([ '#{{id}} .layui-laydate-header{background-color:{{theme}};}' ,'#{{id}} li.layui-this,#{{id}} td.layui-this>div{background-color:{{theme}} !important;}' @@ -541,7 +561,11 @@ ].join('').replace(/{{id}}/g, that.elemID).replace(/{{theme}}/g, theme)); } }); - if (style) { + //快捷栏样式 + if (options.shortcuts && options.range) { + styleText.push('#{{id}}.layui-laydate-range{width: 628px;}'.replace(/{{id}}/g, that.elemID)) + } + if (styleText.length) { styleText = styleText.join(''); if('styleSheet' in style){ style.setAttribute('type', 'text/css'); @@ -549,8 +573,8 @@ } else { style.innerHTML = styleText; } - - lay(elem).addClass('laydate-theme-molv'); + + colorTheme && lay(elem).addClass('laydate-theme-molv'); elem.appendChild(style); }