element 日期组件 daterange，右侧显示当前月份

element ui 的 el-date-picker组件应该都使用过，以及picker-options属性，禁用时间范围

基本代码

<template>
	<el-date-picker
	   v-model="date"
	   type="daterange"
	   value-format="yyyy-MM-dd"
	   start-placeholder="开始日期"
	   end-placeholder="结束日期"
	   :picker-options="pickerOptions"
	 >
	 </el-date-picker>

</template>

<script>
export default {

  data () {
    return {
    	date:'',
    	pickerOptions: {
		  disabledDate (time) {
		     // 如果没有后面的-8.64e6就是不可以选择今天的
		     return time.getTime() > Date.now() - 8.64e6
		   }
		 }
    }
  }
}

</script>

预览效果，有点差强人意，不好看

default-value 使用

 <el-date-picker
    v-model="date"
    type="daterange"
    value-format="yyyy-MM-dd"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
    :default-value="timeDefaultShow"
  >
  </el-date-picker>

export default {
	created () {
      this.timeDefaultShow = new Date()
      this.timeDefaultShow.setMonth(new Date().getMonth() - 1)
  }
}