Merge pull request #1062 from meihangbo/main

日期控件添加中国法定节假日及补班标注

examples/laydate.html

@@ -76,6 +76,11 @@ body{padding: 50px 100px;}
   <input type="text" class="layui-input" id="test555">
 </div>
 
+标注法定节假日及补班：
+<div class="layui-inline">
+  <input type="text" class="layui-input" id="test5555">
+</div>
+
 <br><br><hr><br>
 
 
@@ -133,6 +138,10 @@ layui.use('laydate', function(laydate){
   //全局配置
   laydate.set({
     //trigger: 'focus'
+    workrest: [
+      ['2022-1-1', '2022-1-2', '2022-1-3', '2022-1-31', '2022-2-1', '2022-2-2', '2022-2-3', '2022-2-4', '2022-2-5', '2022-2-6', '2022-4-3', '2022-4-4', '2022-4-5', '2022-4-30', '2022-5-1', '2022-5-2', '2022-5-3', '2022-5-4', '2022-6-3', '2022-6-4', '2022-6-5', '2022-9-10', '2022-9-11', '2022-9-12', '2022-10-1', '2022-10-2', '2022-10-3', '2022-10-4', '2022-10-5', '2022-10-6', '2022-10-7'],
+      ['2022-1-29', '2022-1-30', '2022-4-2', '2022-4-24', '2022-5-7',  '2022-10-8', '2022-10-9']
+    ]
   })
 
   //范围选择1
@@ -279,6 +288,13 @@ layui.use('laydate', function(laydate){
       console.log(value)
     }
   });
+
+  // 标注法定节假日及补班
+  var ins5555 = laydate.render({
+    elem: '#test5555',
+    value: '2022-5-21',
+    isWorkrest: true
+  });
   
   //墨绿主题
   laydate.render({

src/css/modules/laydate/default/laydate.css

@@ -60,6 +60,10 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
 .layui-laydate-content td{position: relative; cursor: pointer;}
 .laydate-day-mark{position: absolute; left: 0; top: 0; width: 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-workrest:before{position: absolute; left: 0;top: 3px;font-size: 12px;transform: scale(.7);}
+.laydate-day-workrest.rest:before{content:'假';color: #d11211;}
+.laydate-day-workrest.work:before{content:'班';color: #1589ee;}
+.layui-laydate .layui-this .laydate-day-workrest:before{color: #fff;}
 
 /* 底部结构 */
 .layui-laydate-footer{position: relative; height: 46px; line-height: 26px; padding: 10px;}

src/modules/laydate.js

@@ -121,6 +121,8 @@
     ,position: null //控件定位方式定位, 默认absolute，支持：fixed/absolute/static
     ,calendar: false //是否开启公历重要节日，仅支持中文版
     ,mark: {} //日期备注，如重要事件或活动标记
+    ,isWorkrest: false // 是否标注节假日或补假上班, 默认 false
+    ,workrest: [] // 标注法定节假日或补假上班
     ,zIndex: null //控件层叠顺序
     ,done: null //控件选择完毕后的回调，点击清空/现在/确定也均会触发
     ,change: null //日期时间改变后的回调
@@ -279,6 +281,10 @@
       ,'0-10-1': '国庆'
       ,'0-12-25': '圣诞'
     } : {}, options.mark);
+
+    if(options.isWorkrest){
+      options.workrest = lay.extend({}, (options.calendar && options.lang === 'cn') ? [] : [], options.workrest);
+    }
     
     //获取限制内日期
     lay.each(['min', 'max'], function(i, item){
@@ -795,6 +801,22 @@
     
     return that;
   };
+
+  // 标注法定节假日或补假上班
+  Class.prototype.workrest = function(td, YMD) {
+    var that = this,
+      workrest,
+      workclsArr = ['rest', 'work'],
+      options = that.config;
+    lay.each(options.workrest, function(idx, itm) {
+      lay.each(itm, function(i, dayStr) {
+        if(dayStr === td[0].getAttribute('lay-ymd')){
+          td.html('<span class="laydate-day-workrest ' + workclsArr[idx] + '">' + YMD[2] + '</span>');
+        }
+      });
+    });
+    return that;
+  }
   
   //无效日期范围的标记
   Class.prototype.limit = function(elem, date, index, time){
@@ -886,6 +908,14 @@
         ,month: YMD[1] - 1
         ,date: YMD[2]
       }, index_);
+      
+      if(options.isWorkrest){
+        that.workrest(item, YMD).limit(item, {
+          year: YMD[0]
+          ,month: YMD[1] - 1
+          ,date: YMD[2]
+        }, index_);
+      }
     });  
     
     //同步头部年月