laydate新增快捷选项栏

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;}
+.laydate-theme-fullpanel .laydate-btns-time{display: none;}

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('<div class="laydate-footer-btns">'+ btns.join('') +'</div>');
       return html.join('');
     }());
+
+    //生成快捷键栏
+    elem.appendChild(divShortcut);
+    lay(divShortcut).html(function () {
+      var shortcutBtns = [];
+      lay.each(options.shortcuts, function (i, item) {
+        shortcutBtns.push('<li>'+item.text+'</li>')
+      })
+      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);
     }