diff --git a/examples/laydate.html b/examples/laydate.html index 7caf70ba..95e21780 100644 --- a/examples/laydate.html +++ b/examples/laydate.html @@ -76,6 +76,11 @@ body{padding: 50px 100px;} +标注法定节假日及补班: +
+ +
+



@@ -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({ diff --git a/src/css/modules/laydate/default/laydate.css b/src/css/modules/laydate/default/laydate.css index 2f54cf9c..9a0f3e9a 100644 --- a/src/css/modules/laydate/default/laydate.css +++ b/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;} diff --git a/src/modules/laydate.js b/src/modules/laydate.js index 3436ebe5..8d2a421b 100644 --- a/src/modules/laydate.js +++ b/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('' + YMD[2] + ''); + } + }); + }); + 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_); + } }); //同步头部年月