ElementUI el-date-picker日期选择器当月时间在右侧显示,并且今天之后的日期无法选择

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)