element UI中修改el-datepicker样式
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
type为date的样式
<el-date-picker :key="num1" v-model='queryParams.timerange'
type='date' style='width:130px'
placeholder='请选择日期'
:append-to-body='fullscreen'
:popper-class="'datestyle_' + curtheme"
@change='changeBystart'>
</el-date-picker>
<style lang='less' type='text/less'>
.datestyle_dark{
border: solid 1px;
background-color: #023c50 !important;
color:#39fcff !important;
border: 1px solid #263b71 !important;
//图标颜色
.el-picker-panel__icon-btn{
font-size: 12px;
color: #39fcff !important;
border: 0;
background: transparent;
cursor: pointer;
outline: none;
margin-top: 8px;
}
//日期文字颜色:周一、周二的样式
.el-date-table th {
padding: 5px;
color: #39fcff !important;
font-weight: 400;
border-bottom: solid 1px #39fcff !important;
}
//头部标题:2024年3月
.el-date-picker__header-label {
color: #fff !important;
font-size: 14px;
}
.el-date-table td.available div {
color: #eaf5f2;
}
//鼠标悬浮上的样式
.el-date-table td.available:hover{
color: #ffffff !important;
span{
border-radius: 50%;
background-color: #39fcff !important;
}
}
.el-date-table td.next-month, .el-date-table td.prev-month {
color: #255687;
}
.el-date-table td.disabled div {
background-color: #023c50;
opacity: 1;
cursor: not-allowed;
color: #c8d4ec;
}
.el-picker-panel__body-wrapper{
border: 1px solid #025772;
}
.el-date-range-picker__content .el-date-range-picker__header div {
margin-left: 50px;
margin-right: 50px;
color: #fff;
}
}
</style>
效果图
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)