ElementUI官网给出的案例当月时间默认是在左边展示的,根据开完需要,要把当月日期放在右边展示,并且今天之后的日期无法选择
先引用ElementUI官方案例
<template>
<div>
<el-date-picker
v-model="pickerDate"
unlink-panels
type="daterange"
range-separator="至"
start-placeholder="开始日期"
:picker-options="pickerBeginDateBefore"
end-placeholder="结束日期">
</el-date-picker>
</div>
</template>
详细的属性及方法用法可去官网查看
pickerBeginDateBefore数据格式
<script>
export default {
data() {
return {
pickerBeginDateBefore:{
disabledDate(time) {
return time.getTime() > Date.now();
}
},
timeDefaultShow:'',
pickerDate:''
}
}
}
</script>
这里实现的是今天之后的日期都不可选择
当月日期在右边显示代码
选择器中加入default-value属性
:default-value="timeDefaultShow"
在mounted或created页面初始化是给timeDefaultShow赋值
this.timeDefaultShow = new Date();
this.timeDefaultShow.setMonth(new Date().getMonth() - 1);
这样就实现了当月时间在右边,并且今天之后的日期无法选择
效果:
全部代码:
<template>
<div>
<el-date-picker
v-model="pickerDate"
unlink-panels
type="daterange"
range-separator="至"
start-placeholder="开始日期"
:picker-options="pickerBeginDateBefore"
:default-value="timeDefaultShow"
end-placeholder="结束日期">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerBeginDateBefore:{
disabledDate(time) {
return time.getTime() > Date.now();
}
},
timeDefaultShow:'',
pickerDate:''
}
},
mounted(){
this.timeDefaultShow = new Date();
this.timeDefaultShow.setMonth(new Date().getMonth() - 1);
}
}
</script>
如果是月份的话
修改type="daterange"为type=“monthrange”
this.timeDefaultShow.setMonth(new Date().getMonth() - 1)改为-12
或者改为
this.timeDefaultShow.setMonth(new Date().getFullYear() - 1)