feat(laydate): 新增 cellRender 选项，用于自定义单元格内容 (#1843)
* feat(laydate): 新增 cellRender 选项，用于自定义单元格内容 * docs(laydate): 添加 cellRender 文档 * chore: 调整示例顺序 * chore: 采用 stackblitz 原示例，提升扩展内容的丰富性 注： HTML 出现换行且缩进，会被 markdown 解析器解析为 code，因此删除了换行和最外层缩进 * chore: 注释示例中的若干选项 * chore: 解除若干选项的注释 * chore: 改进 cellRender 文档示例的可读性 * refactor(laydate): cellRender 第一个参数由数组改为对象 * docs(laydate): 改进 cellRender 文档可读性 --------- Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
This commit is contained in:
morning-star
GitHub
parent
d8d0cbad40
commit
7600e4f1e5
@ -79,7 +79,6 @@
|
|||||||
</textarea>
|
</textarea>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
<h3 id="demo-theme" lay-toc="{level: 2, hot: true}">自定义主题</h3>
|
<h3 id="demo-theme" lay-toc="{level: 2, hot: true}">自定义主题</h3>
|
||||||
|
|
||||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||||
@ -88,10 +87,18 @@
|
|||||||
</textarea>
|
</textarea>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h3 id="demo-static" lay-toc="{level: 2}">直接静态显示</h3>
|
<h3 id="demo-static" lay-toc="{level: 2}">静态显示</h3>
|
||||||
|
|
||||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||||
<textarea>
|
<textarea>
|
||||||
{{- d.include("/laydate/examples/static.md") }}
|
{{- d.include("/laydate/examples/static.md") }}
|
||||||
</textarea>
|
</textarea>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
<h3 id="demo-custom-cell" lay-toc="{level: 2}">扩展农历 🔥</h3>
|
||||||
|
|
||||||
|
<pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 385px;', codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||||
|
<textarea>
|
||||||
|
{{- d.include("/laydate/examples/cell.md") }}
|
||||||
|
</textarea>
|
||||||
|
</pre>
|
||||||
|
|||||||
@ -715,6 +715,29 @@ holidays: function (ymd, render) {
|
|||||||
<td>-</td>
|
<td>-</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
|
<td>cellRender <sup>2.9.9+</sup></td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
自定义单元格内容。
|
||||||
|
|
||||||
|
```
|
||||||
|
cellRender: function(ymd, render, info){
|
||||||
|
var y = ymd.year;
|
||||||
|
var m = ymd.month;
|
||||||
|
var d = ymd.date;
|
||||||
|
|
||||||
|
// 面板类型 'year' | 'month' | 'date'
|
||||||
|
if(info.type === 'date'){
|
||||||
|
render(d); // 参数为 string, HTMLElement, JQuery 类型
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>function</td>
|
||||||
|
<td> - </td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
<td colspan="4" style="text-align: center">
|
<td colspan="4" style="text-align: center">
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
178
docs/laydate/examples/cell.md
Normal file
178
docs/laydate/examples/cell.md
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Document</title>
|
||||||
|
<link href="{{= d.layui[2].cdn.css }}" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
.laydate-theme-lunar .layui-laydate-main {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.laydate-theme-lunar .date-cell-inner {
|
||||||
|
padding: 6px;
|
||||||
|
width: 44px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 4px !important;
|
||||||
|
}
|
||||||
|
.laydate-theme-lunar .layui-this {
|
||||||
|
border-radius: 4px !important;
|
||||||
|
}
|
||||||
|
.laydate-theme-lunar .date-cell-inner b {
|
||||||
|
display: block;
|
||||||
|
font-weight: 400;
|
||||||
|
height: 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.laydate-theme-lunar .date-cell-inner i {
|
||||||
|
display: block;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
.laydate-theme-lunar .badge {
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
background-color: #4e5877;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 14px;
|
||||||
|
padding: 1px 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
transform: scale(0.7);
|
||||||
|
}
|
||||||
|
.laydate-theme-lunar .holiday .badge {
|
||||||
|
background-color: #eb3333 !important;
|
||||||
|
}
|
||||||
|
.laydate-theme-lunar .hightlight i {
|
||||||
|
color: #1e9fff;
|
||||||
|
}
|
||||||
|
.laydate-theme-lunar .layui-this .hightlight i {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.laydate-theme-lunar .laydate-month-list > li {
|
||||||
|
height: 50px !important;
|
||||||
|
line-height: 50px !important;
|
||||||
|
width: 24.2% !important;
|
||||||
|
margin: 18px 1px !important;
|
||||||
|
}
|
||||||
|
.laydate-theme-lunar .laydate-year-list > li {
|
||||||
|
height: 40px !important;
|
||||||
|
line-height: normal !important;
|
||||||
|
width: 31.3% !important;
|
||||||
|
margin: 8px 2px !important;
|
||||||
|
}
|
||||||
|
.laydate-theme-lunar .preview-inner>*{
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 5px;
|
||||||
|
position:relative;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.laydate-theme-lunar .preview-inner>.badge{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="layui-padding-3">
|
||||||
|
<div class="layui-inline" id="ID-laydate-cell-render"></div>
|
||||||
|
<script src="https://cdn.staticfile.org/lunar-javascript/1.6.12/lunar.min.js"></script>
|
||||||
|
<script src="{{= d.layui[2].cdn.js }}"></script>
|
||||||
|
<script>
|
||||||
|
layui.use(function () {
|
||||||
|
var laydate = layui.laydate;
|
||||||
|
var $ = layui.$;
|
||||||
|
var util = layui.util;
|
||||||
|
// 渲染
|
||||||
|
laydate.render({
|
||||||
|
elem: '#ID-laydate-cell-render',
|
||||||
|
position: 'static',
|
||||||
|
// value: '2024-03-30',
|
||||||
|
isPreview: false,
|
||||||
|
btns: ['now'],
|
||||||
|
theme: 'lunar',
|
||||||
|
autoConfirm: false,
|
||||||
|
ready: function () {
|
||||||
|
if (!this._previewEl) {
|
||||||
|
var key = this.elem.attr('lay-key');
|
||||||
|
var panelEl = $('#layui-laydate' + key);
|
||||||
|
this._previewEl = panelEl.find('.layui-laydate-preview');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cellRender: function (ymd, render, info) {
|
||||||
|
var that = this;
|
||||||
|
var y = ymd.year;
|
||||||
|
var m = ymd.month;
|
||||||
|
var d = ymd.date;
|
||||||
|
var lunarDate = Solar.fromYmd(y, m, d).getLunar();
|
||||||
|
var lunar = lunarDate.getDayInChinese();
|
||||||
|
var jieQi = lunarDate.getJieQi();
|
||||||
|
var holiday = HolidayUtil.getHoliday(y, m, d);
|
||||||
|
var displayHoliday = holiday && holiday.getTarget() === holiday.getDay() ? holiday.getName() : undefined;
|
||||||
|
var displayHolidayBadge = holiday && holiday.getTarget() ? (holiday.isWork() ? '班' : '休') : undefined;
|
||||||
|
var isHoliday = holiday && holiday.getTarget() && !holiday.isWork();
|
||||||
|
// 面板类型
|
||||||
|
if (info.type === 'date') {
|
||||||
|
var clazz = [
|
||||||
|
'date-cell-inner',
|
||||||
|
isHoliday ? 'holiday' : '',
|
||||||
|
displayHoliday || jieQi ? 'hightlight' : '',
|
||||||
|
].join(' ');
|
||||||
|
var content = [
|
||||||
|
'<div class="' + clazz + '">',
|
||||||
|
'<b>' + d + '</b>',
|
||||||
|
'<i>' + (displayHoliday || jieQi || lunar) + '</i>',
|
||||||
|
displayHolidayBadge ? '<u class="badge">' + displayHolidayBadge + '</u>' : '',
|
||||||
|
'</div>',
|
||||||
|
].join('');
|
||||||
|
// render(content)
|
||||||
|
// render($(content)[0])
|
||||||
|
var contentEl = $(content);
|
||||||
|
contentEl.on('contextmenu', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
layer.tips(lunarDate.toString(), this, {
|
||||||
|
tips: [1, '#16baaa'],
|
||||||
|
zIndex: 999999999,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
contentEl.on('click', function () {
|
||||||
|
var holidayBadgeStyle = [
|
||||||
|
'color:#fff',
|
||||||
|
'background-color:' + (isHoliday ? '#eb3333' : '#333'),
|
||||||
|
'display:' + (displayHolidayBadge ? 'inline-block' : 'none')
|
||||||
|
].join(';')
|
||||||
|
var festivalBadgeStyle = [
|
||||||
|
'color:#fff',
|
||||||
|
'background-color:#1e9fff',
|
||||||
|
'display:' + (displayHoliday || jieQi ? 'inline-block' : 'none')
|
||||||
|
].join(';')
|
||||||
|
var tipsText = [
|
||||||
|
'<div class="preview-inner">',
|
||||||
|
'<div style="color:#333;">农历' + lunarDate.getMonthInChinese() + '月' + lunarDate.getDayInChinese() + '</div>',
|
||||||
|
'<div style="font-size:10px">' + lunarDate.getYearInGanZhi() + lunarDate.getYearShengXiao() + '年</div>',
|
||||||
|
'<div style="font-size:10px">' + lunarDate.getMonthInGanZhi() + '月 ' + lunarDate.getDayInGanZhi() + '日</div>',
|
||||||
|
'<div class="badge" style="' + holidayBadgeStyle +'">' + displayHolidayBadge + '</div>',
|
||||||
|
'<div class="badge" style="'+ festivalBadgeStyle +'">' + (displayHoliday || jieQi) + '</div>',
|
||||||
|
'</div>'
|
||||||
|
].join('');
|
||||||
|
that._previewEl.html(tipsText);
|
||||||
|
});
|
||||||
|
render(contentEl);
|
||||||
|
} else if (info.type === 'year') {
|
||||||
|
var lunarDate = Lunar.fromDate(new Date(y + 1, 0));
|
||||||
|
var lunar = lunarDate.getYearInGanZhi() + lunarDate.getYearShengXiao();
|
||||||
|
render([
|
||||||
|
y + '年',
|
||||||
|
'<div style="font-size:12px">' + lunar + '年</div>',
|
||||||
|
].join(''));
|
||||||
|
} else if (info.type === 'month') {
|
||||||
|
var lunar = lunarDate.getMonthInChinese();
|
||||||
|
render([m + '月(' + lunar + '月)'].join(''));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1186,6 +1186,31 @@
|
|||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 自定义单元格
|
||||||
|
* @param {HTMLElement|Array<HTMLElement>} el - 单元格元素
|
||||||
|
* @param {{year:number, month:number, date:number}} dateObj - 当前单元格对应的日期信息
|
||||||
|
* @param {'year' | 'month' | 'date'} panelMode - 面板模式
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
Class.prototype.cellRender = function(el, dateObj, panelMode){
|
||||||
|
var that = this;
|
||||||
|
var options = that.config;
|
||||||
|
|
||||||
|
if(typeof options.cellRender === 'function'){
|
||||||
|
var render = function(content){
|
||||||
|
if(typeof content === 'string'){
|
||||||
|
lay(el).html(content);
|
||||||
|
}else if(typeof content === 'object'){
|
||||||
|
lay(el).html('').append(lay(content)[0]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
options.cellRender(dateObj, render, {originElem: el, type: panelMode})
|
||||||
|
}
|
||||||
|
|
||||||
|
return that;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 给定年份的开始日期
|
* 给定年份的开始日期
|
||||||
* @param {Date} date
|
* @param {Date} date
|
||||||
@ -1465,6 +1490,7 @@
|
|||||||
rangeType: index,
|
rangeType: index,
|
||||||
disabledType: 'date' // 日面板，检测当前日期是否禁用
|
disabledType: 'date' // 日面板，检测当前日期是否禁用
|
||||||
});
|
});
|
||||||
|
that.cellRender(item, {year: YMD[0], month: YMD[1], date: YMD[2]}, 'date');
|
||||||
});
|
});
|
||||||
|
|
||||||
//同步头部年月
|
//同步头部年月
|
||||||
@ -1612,6 +1638,7 @@
|
|||||||
rangeType: index,
|
rangeType: index,
|
||||||
disabledType: 'date' // 年面板，检测当前年份中的所有日期是否禁用
|
disabledType: 'date' // 年面板，检测当前年份中的所有日期是否禁用
|
||||||
});
|
});
|
||||||
|
that.cellRender(li, {year: yearNum, month: 1, date: 1}, 'year');
|
||||||
yearNum++;
|
yearNum++;
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -1651,6 +1678,7 @@
|
|||||||
rangeType: index,
|
rangeType: index,
|
||||||
disabledType: 'date' // 月面板，检测当前月份中的所有日期是否禁用
|
disabledType: 'date' // 月面板，检测当前月份中的所有日期是否禁用
|
||||||
});
|
});
|
||||||
|
that.cellRender(li, {year: listYM[0], month: i + 1, date: 1}, 'month');
|
||||||
});
|
});
|
||||||
|
|
||||||
lay(elemYM[isCN ? 0 : 1]).attr('lay-ym', listYM[0] + '-' + listYM[1])
|
lay(elemYM[isCN ? 0 : 1]).attr('lay-ym', listYM[0] + '-' + listYM[1])
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user