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>
|
||||
</pre>
|
||||
|
||||
|
||||
<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']}">
|
||||
@ -88,10 +87,18 @@
|
||||
</textarea>
|
||||
</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']}">
|
||||
<textarea>
|
||||
{{- d.include("/laydate/examples/static.md") }}
|
||||
</textarea>
|
||||
</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>
|
||||
</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">
|
||||
|
||||
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
/**
|
||||
* 自定义单元格
|
||||
* @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
|
||||
@ -1465,6 +1490,7 @@
|
||||
rangeType: index,
|
||||
disabledType: 'date' // 日面板，检测当前日期是否禁用
|
||||
});
|
||||
that.cellRender(item, {year: YMD[0], month: YMD[1], date: YMD[2]}, 'date');
|
||||
});
|
||||
|
||||
//同步头部年月
|
||||
@ -1612,6 +1638,7 @@
|
||||
rangeType: index,
|
||||
disabledType: 'date' // 年面板，检测当前年份中的所有日期是否禁用
|
||||
});
|
||||
that.cellRender(li, {year: yearNum, month: 1, date: 1}, 'year');
|
||||
yearNum++;
|
||||
});
|
||||
|
||||
@ -1651,6 +1678,7 @@
|
||||
rangeType: index,
|
||||
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])
|
||||
|
||||
Loading…
Reference in New Issue
Block a user