feat(laydate): mark 和 holidays 支持函数类型 (#1786)

* feat(laydate): mark 和 holidays 支持函数类型

* docs(laydate): 更新 holidays 和 mark 文档

docs/laydate/detail/options.md

@@ -599,6 +599,8 @@ theme: ['#16baaa', '#16b777']
 
 </div>
 
+- object 类型
+
 ```
 mark: {
   '0-10-14': '生日', //每年每月的某一天
@@ -609,6 +611,27 @@ mark: {
 
 前缀 `0-` 即代表每年，`0-0-` 即代表每年每月。
 
+- function 类型 <sup>2.9.9+</sup>
+
+```
+mark: function (ymd, render) {
+  var y = ymd[0];
+  var m = ymd[1];
+  var d = ymd[2];
+
+  // 字符串
+  if (m === 6 && d === 1) return render('儿童节');
+
+  // 对象
+  render ({
+    '0-10-14': '生日',
+    '0-0-15': '中旬',
+    '2024-03-20': 'v2',
+    '2024-03-31': '月底',
+  });
+}
+```
+
 效果详见： [#示例](#demo-mark)
 
 
@@ -625,9 +648,11 @@ mark: {
 <td>
   
 <div id="options.holidays" class="ws-anchor">
-用于标注节假日及补班日。值是一个二维数组，如：
+用于标注节假日及补班日。
 </div>
 
+- 若为 array 类型，值是一个二维数组，如：
+
 ```
 holidays: [
   // 2023 年的节假日
@@ -637,6 +662,27 @@ holidays: [
 ]
 ```
 
+- 若为 function 类型 <sup>2.9.9+</sup>
+
+```
+holidays: function (ymd, render) {
+  var y = ymd[0];
+  var m = ymd[1];
+  var d = ymd[2];
+
+  // 字符串
+  if (y === 2023 && m === 6) {
+    render('holidays'); // 'holidays'/'workdays'
+  // 数组
+  } else if (y === 2024) {
+    render([
+      ['2024-03-01', '2024-03-02', '2024-03-03'],
+      ['2024-03-6', '2024-03-25'],
+    ]);
+  }
+}
+```
+
 相关日期值可详细参考国家每年公布的法定节假日安排
 
 效果详见： [#示例](#demo-mark)

src/css/modules/laydate.css

@@ -61,7 +61,7 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
 .laydate-day-mark::after{position: absolute; content:''; right: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50%;}
 .laydate-day-holidays:before{position: absolute; left: 0; top: 0; font-size: 12px; transform: scale(.7);}
 .laydate-day-holidays:before{content:'\4F11'; color: #FF5722;}
-.laydate-day-holidays[type="work"]:before{content:'\73ED'; color: inherit;}
+.laydate-day-holidays[type="workdays"]:before{content:'\73ED'; color: inherit;}
 .layui-laydate .layui-this .laydate-day-holidays:before{color: #fff;}
 
 /* 底部结构 */

src/modules/laydate.js

@@ -234,6 +234,20 @@
     return text[options.lang] || text['cn'];
   };
 
+  Class.prototype.markerOfChineseFestivals = {
+    '0-1-1': '元旦',
+    '0-2-14': '情人' ,
+    '0-3-8': '妇女',
+    '0-3-12': '植树',
+    '0-4-1': '愚人',
+    '0-5-1': '劳动',
+    '0-5-4': '青年',
+    '0-6-1': '儿童',
+    '0-9-10': '教师',
+    '0-10-1': '国庆',
+    '0-12-25': '圣诞'
+  }
+
   // 重载实例
   Class.prototype.reload = function(options){
     var that = this;
@@ -358,20 +372,6 @@
     options.eventElem.attr('lay-key', that.index);
     options.elem.attr(MOD_ID, options.id); // 渲染过的标记
 
-    //记录重要日期
-    options.mark = lay.extend({}, (options.calendar && options.lang === 'cn') ? {
-      '0-1-1': '元旦'
-      ,'0-2-14': '情人'
-      ,'0-3-8': '妇女'
-      ,'0-3-12': '植树'
-      ,'0-4-1': '愚人'
-      ,'0-5-1': '劳动'
-      ,'0-5-4': '青年'
-      ,'0-6-1': '儿童'
-      ,'0-9-10': '教师'
-      ,'0-10-1': '国庆'
-      ,'0-12-25': '圣诞'
-    } : {}, options.mark);
 
     //获取限制内日期
     lay.each(['min', 'max'], function(i, item){
@@ -1049,30 +1049,66 @@
     return that;
   };
 
-  // 公历重要日期与自定义备注
+  /**
+   * 渲染备注
+   * @param {JQuery} tdElem td 元素
+   * @param {[number, number, number]} YMD 年月日
+   * @param {object | string} markers 备注信息
+   */
+  Class.prototype.markRender = function(tdElem, YMD, markers){
+    var markText;
+
+    if(typeof markers === 'object'){
+      lay.each(markers || {}, function(key, title){
+        var keys = key.split('-');
+        if((keys[0] == YMD[0] || keys[0] == 0) //每年的每月
+        && (keys[1] == YMD[1] || keys[1] == 0) //每月的每日
+        && keys[2] == YMD[2]){ //特定日
+          markText = title || YMD[2];
+        }
+      });
+    }else if(typeof markers === 'string'){
+      markText = markers ||  YMD[2];
+    }
+
+    markText && tdElem.find('div').html('<span class="laydate-day-mark">'+ markText +'</span>');
+  }
+
+  /**
+   * 公历重要日期与自定义备注
+   * @param {JQuery} td 
+   * @param {[number, number, number]} YMD 
+   * @returns Class
+   */
   Class.prototype.mark = function(td, YMD){
-    var that = this
-    ,mark, options = that.config;
-    lay.each(options.mark, function(key, title){
-      var keys = key.split('-');
-      if((keys[0] == YMD[0] || keys[0] == 0) //每年的每月
-      && (keys[1] == YMD[1] || keys[1] == 0) //每月的每日
-      && keys[2] == YMD[2]){ //特定日
-        mark = title || YMD[2];
-      }
-    });
-    mark && td.find('div').html('<span class="laydate-day-mark">'+ mark +'</span>');
+    var that = this;
+    var options = that.config;
+
+    var render = function(markers){
+      that.markRender(td, YMD, markers);
+    }
+
+    if(options.calendar && options.lang === 'cn'){
+      render(that.markerOfChineseFestivals);
+    } 
+
+    if(typeof options.mark === 'function'){
+      options.mark(YMD, render);
+    }else if(typeof options.mark === 'object'){
+      render(options.mark);
+    }
 
     return that;
   };
 
-  // 标注法定节假日或补假上班
-  Class.prototype.holidays = function(td, YMD) {
-    var that = this;
-    var options = that.config;
-    var type = ['', 'work'];
-
-    if(layui.type(options.holidays) !== 'array') return that;
+  /**
+   * 渲染法定节假日或补假上班标记
+   * @param {JQuery} tdElem td 元素
+   * @param {[number, number, number]} YMD 年月日
+   * @param {[Array<string>, Array<string>] | string} markers 标记信息
+   */
+  Class.prototype.holidaysRender = function(tdElem, YMD, markers){
+    var type = ['holidays', 'workdays'];
 
     var isEquals = function(ymdStr1, ymdStr2){
       var ymd1 = ymdStr1.split('-');
@@ -1088,15 +1124,51 @@
       return ymd1.join('-') === ymd2.join('-');
     }
 
-    lay.each(options.holidays, function(idx, item) {
-      lay.each(item, function(i, dayStr) {
-        if(isEquals(dayStr, td.attr('lay-ymd'))){
-          td.find('div').html('<span class="laydate-day-holidays"' + (
-            type[idx] ? ('type="'+ type[idx] +'"') : ''
-          ) + '>' + YMD[2] + '</span>');
-        }
+    var insertHtml = function(el, type, text){
+      el.find('div').html([
+        '<span',
+        ' class="laydate-day-holidays"',
+        ' type="'+ type +'"',
+        '>',
+          text,
+        '</span>'
+      ].join(''));
+    }
+    
+    if(layui.type(markers) === 'array'){
+      lay.each(markers, function(idx, item) {
+        lay.each(item, function(i, dayStr) {
+          if(isEquals(dayStr, tdElem.attr('lay-ymd'))){
+            insertHtml(tdElem, type[idx], YMD[2])
+          }
+        });
       });
-    });
+    }else if(typeof markers === 'string'){
+      if(type.indexOf(markers) !== -1){
+        insertHtml(tdElem, markers, YMD[2])
+      }
+    }
+  }
+
+  /**
+   * 标注法定节假日或补假上班
+   * @param {JQuery} td 
+   * @param {[number, number, number]} YMD 
+   * @returns Class
+   */
+  Class.prototype.holidays = function(td, YMD) {
+    var that = this;
+    var options = that.config;
+
+    var render = function(markers){
+      that.holidaysRender(td, YMD, markers);
+    }
+
+    if(typeof options.holidays === 'function'){
+      options.holidays(YMD, render);
+    }else if(layui.type(options.holidays) === 'array'){
+      render(options.holidays);
+    }
 
     return that;
   };