diff --git a/docs/laydate/detail/options.md b/docs/laydate/detail/options.md index 1b9e4aba..a8905729 100644 --- a/docs/laydate/detail/options.md +++ b/docs/laydate/detail/options.md @@ -599,6 +599,8 @@ theme: ['#16baaa', '#16b777'] +- object 类型 + ``` mark: { '0-10-14': '生日', //每年每月的某一天 @@ -609,6 +611,27 @@ mark: { 前缀 `0-` 即代表每年,`0-0-` 即代表每年每月。 +- function 类型 2.9.9+ + +``` +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: {
-用于标注节假日及补班日。值是一个二维数组,如: +用于标注节假日及补班日。
+- 若为 array 类型,值是一个二维数组,如: + ``` holidays: [ // 2023 年的节假日 @@ -637,6 +662,27 @@ holidays: [ ] ``` +- 若为 function 类型 2.9.9+ + +``` +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) diff --git a/src/css/modules/laydate.css b/src/css/modules/laydate.css index b6884b44..6bae4eb3 100644 --- a/src/css/modules/laydate.css +++ b/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;} /* 底部结构 */ diff --git a/src/modules/laydate.js b/src/modules/laydate.js index 6751240f..28b440e5 100644 --- a/src/modules/laydate.js +++ b/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(''+ markText +''); + } + + /** + * 公历重要日期与自定义备注 + * @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(''+ mark +''); + 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, Array] | 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('' + YMD[2] + ''); - } + var insertHtml = function(el, type, text){ + el.find('div').html([ + '', + text, + '' + ].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; };