利用 layDate 5.0 的主题接口: theme，进一步美化界面

自然要以我本人的“程序员”的审美观，仅仅运用 layDate 的 theme插口，加了点CSS订制了一套主题风格，因此编码并不是很多，而且没涉及源代码的修改。此外假如 td 里边能再嵌套循环一个标识就更强了。

一. CSS代码

将下面的代码放入你自己的 CSS 文件中即可（但别放 layui 的 css 文件中）：

/* 扩展 laydate 皮肤：gbw */
.layui-laydate.laydate-theme-gbw, .layui-laydate-hint.laydate-theme-gbw{
border:1px solid #FFF;
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.layui-laydate.laydate-theme-gbw{
border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;
font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.65);
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: absolute;
z-index: 19850126;
}
.laydate-theme-gbw .layui-laydate-header{
border-bottom:1px solid #e8e8e8;
padding-top:5px;
}
.laydate-theme-gbw .layui-laydate-header i{font-size: 12px;color:rgba(0,0,0,.45)}
.laydate-theme-gbw .layui-laydate-header span{color:rgba(0,0,0,.85);font-weight: 500;}
.laydate-theme-gbw .layui-laydate-header i:hover, .laydate-theme-gbw .layui-laydate-header span:hover{
color:#40a9ff
}
.laydate-theme-gbw .layui-laydate-footer{border-top:0;padding-top: 0;height: 36px;}
.laydate-theme-gbw .layui-laydate-footer span:hover{color:#40a9ff}
.laydate-theme-gbw .laydate-footer-btns{top:0;}
.laydate-theme-gbw .layui-laydate-content th{color:rgba(0, 0, 0, 0.65);}
.laydate-theme-gbw .layui-laydate-content td{
color: rgba(0, 0, 0, 0.65);
border-radius: 2px;
-webkit-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.laydate-theme-gbw .layui-laydate-content .laydate-day-next, .laydate-theme-gbw .layui-laydate-content .laydate-day-prev{
color:rgba(0, 0, 0, 0.25)
}
.layui-laydate.laydate-theme-gbw td.layui-this{
background-color:transparent !important;
border:1px solid #1890ff;
border-radius: 3px;
font-weight: bold;
color: #1890ff !important;
}
.layui-laydate.laydate-theme-gbw li.layui-this {
background-color: #1890ff!important;
color: #fff!important;
border-radius: 0;
border:0
}

二. 调用皮肤：

laydate.render({
elem: '#id' //指定元素
,theme: 'gbw' //指定皮肤
});

本文来源于：利用 layDate 5.0 的主题接口: theme，进一步美化界面-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。