element组件的<el-date-picker>组件大家经常使用,实现指定某些日期范围禁用,调用官方文档上disabledDate方法。
下面是我实现的小demo,有需要的小伙伴可以直接拿来用。
需求: 默认是当前日期及其前30天可以选择,其他时间段是禁用状态。
核心代码如下:
disabledDate(time){
return time.getTime() < Date.now() - 8.64e7*30 || time.getTime() >Date.now();
},
<template>
<div class="block" id="dateTestId">
<!--有快捷键的日期选择器-->
<el-date-picker
v-model="value"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
disabledDate(time){
return time.getTime() < Date.now() - 8.64e7*30 || time.getTime() >Date.now();
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick',[new Date(), new Date()]);
}
},{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
},]
},
value:'',
};
}
};
</script>
<style scoped>
#dateTestId >>> .el-date-editor .el-range-separator{
width: 6% !important;
}
</style>
实现的效果图:
=========================================================================
Tip: 如果想修改时间组件的样式,比如隐藏时间选择器的左右选择按钮,可以在项目的公共样式类中修改element样式。因为<style scoped>只针对当前页面有效,而<el-datePicker>组件和项目页面id="app"是平级的关系,设置scoped的组件样式对<el-datePicker>修改无效。
隐藏时间选择器的左右选择按钮样式代码如下:
.el-picker-panel__icon-btn{
display: none;
}
===》效果图: