2024-05-04 09:04:56 +00:00
|
|
|
<!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>
|
2024-06-03 05:39:34 +00:00
|
|
|
<script src="https://cdn.staticfile.net/lunar-javascript/1.6.12/lunar.min.js"></script>
|
2024-05-04 09:04:56 +00:00
|
|
|
<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,
|
2024-05-05 03:41:14 +00:00
|
|
|
ready: function (date) {
|
2024-05-04 09:04:56 +00:00
|
|
|
if (!this._previewEl) {
|
|
|
|
|
var key = this.elem.attr('lay-key');
|
|
|
|
|
var panelEl = $('#layui-laydate' + key);
|
|
|
|
|
this._previewEl = panelEl.find('.layui-laydate-preview');
|
2024-05-05 03:41:14 +00:00
|
|
|
this.cellRender(date);
|
2024-05-04 09:04:56 +00:00
|
|
|
}
|
|
|
|
|
},
|
2024-05-05 03:41:14 +00:00
|
|
|
change: function(value, date) {
|
|
|
|
|
this.cellRender(date);
|
|
|
|
|
},
|
|
|
|
|
onNow: function(value, date) {
|
|
|
|
|
this.cellRender(date);
|
|
|
|
|
},
|
2024-05-04 09:04:56 +00:00
|
|
|
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();
|
2024-05-05 03:41:14 +00:00
|
|
|
// 在预览区显示自定义农历相关信息
|
|
|
|
|
if (that._previewEl && (!info || (info && info.type === "date"))) {
|
|
|
|
|
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);
|
|
|
|
|
};
|
|
|
|
|
if (!render) return;
|
2024-05-04 09:04:56 +00:00
|
|
|
// 面板类型
|
|
|
|
|
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,
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
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>
|
