mirror of
https://gitee.com/layui/layui.git
synced 2025-10-07 23:24:32 +08:00
6.3 KiB
6.3 KiB
<html lang="en">
<head>
<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>
<script src="https://cdn.staticfile.net/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 (date) {
if (!this._previewEl) {
var key = this.elem.attr('lay-key');
var panelEl = $('#layui-laydate' + key);
this._previewEl = panelEl.find('.layui-laydate-preview');
this.cellRender(date);
}
},
change: function(value, date) {
this.cellRender(date);
},
onNow: function(value, date) {
this.cellRender(date);
},
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 (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 = [
'
',
'
'
].join('');
that._previewEl.html(tipsText);
};
if (!render) return;
// 面板类型
if (info.type === 'date') {
var clazz = [
'date-cell-inner',
isHoliday ? 'holiday' : '',
displayHoliday || jieQi ? 'hightlight' : '',
].join(' ');
var content = [
'农历' + lunarDate.getMonthInChinese() + '月' + lunarDate.getDayInChinese() + '
',
'' + lunarDate.getYearInGanZhi() + lunarDate.getYearShengXiao() + '年
',
'' + lunarDate.getMonthInGanZhi() + '月 ' + lunarDate.getDayInGanZhi() + '日
',
'' + displayHolidayBadge + '
',
'' + (displayHoliday || jieQi) + '
',
'',
'' + d + '',
'' + (displayHoliday || jieQi || lunar) + '',
displayHolidayBadge ? '' + displayHolidayBadge + '' : '',
'
',
].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 + '年',
'' + lunar + '年
',
].join(''));
} else if (info.type === 'month') {
var lunar = lunarDate.getMonthInChinese();
render([m + '月(' + lunar + '月)'].join(''));
}
},
});
});
</script>
</html>