diff --git a/index.html b/index.html new file mode 100644 index 0000000..de1fce6 --- /dev/null +++ b/index.html @@ -0,0 +1,76 @@ + + + + + 使用 layDate 独立版 + + + + + + + + \ No newline at end of file diff --git a/src/laydate.js b/src/laydate.js index 0a75401..169f9d9 100644 --- a/src/laydate.js +++ b/src/laydate.js @@ -101,7 +101,7 @@ //字符常量 ,MOD_NAME = 'laydate', ELEM = '.layui-laydate', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'laydate-disabled', TIPS_OUT = '开始日期超出了结束日期
建议重新选择', 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('
'+ btns.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){ 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; + } + } + + }); + + }; //是否输入框 diff --git a/src/theme/default/laydate.css b/src/theme/default/laydate.css index 5d1e033..41529d8 100644 --- a/src/theme/default/laydate.css +++ b/src/theme/default/laydate.css @@ -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;}