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

分享 未结 精帖
8 2822
朕九州
朕九州 2017-12-15
悬赏:20飞吻
当然是以我个人的“程序猿”的审美,只是利用 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' //指定皮肤
});
回帖
本帖已设置禁止回复