<el-date-picker
v-model="formData.registerDate"
type="date"
:picker-options="customPickerOptions"
popper-class="el-date-picker-custom"
@focus="initCustomDate"
placeholder="选择日期">
</el-date-picker>
computed:{
customPickerOptions () {
let that = this
return {
cellClassName (Date) {
if (that.customDateArr.includes(that.DateToformatDate(Date,'YYYY-MM-DD'))) {
// 自定义的类名, 自行确保这个类型的唯一性,以免覆盖样式
return 'custom_date_class'
}
}
}
}
},
methods: {
// 模拟异步获取哪些日期是 已标记 的
async initCustomDate (Date) {
setTimeout(() => {
this.customDateArr = ['2021-05-24', '2021-05-27', '2021-05-10', '2021-05-18']
}, 100)
},
// 日期格式化
DateToformatDate(date, fmt) {
//按格式返回当前时间
if (fmt == '' || fmt == null) {
fmt = 'YYYY-MM-DD';
}
if (date == '' || date == null) {
date = new Date();
} else {
if (Object.prototype.toString.call(date) !== '[object Date]') {
date = new Date(date);
}
}
var o = {
"Y+": date.getFullYear(), //年
"M+": date.getMonth() + 1, //月份
"D+": date.getDate(), //日
"H+": date.getHours(), //时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
};
if (/(Y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
},
}
style:
// 日期时间选择器 已标记 样式
.custom_date_class {
span {
background: #ea6151;
color: red;
border-radius: 50%;
color: #fff !important;
&:hover {
background-color: #409eff;
}
}
&::after {
content: "已标记";
display: inline-block;
position: absolute;
width: 100%;
font-size: 12px;
color: red;
bottom: -15px;
left: 0;
text-align: center;
white-space: nowrap;
}
}
.el-date-picker-custom {
// 用了/deep/后不兼容ie,所以还是不要随便加上样式穿透,vue-cli3以上也不支持/deep/
// /deep/
.el-date-table td {
padding: 10px 0;
}
}
element ui时间选择器添加时间标注
最新推荐文章于 2024-08-28 14:10:37 发布