iview 日期时间选择器动态限制可选范围

业务背景:

默认今天之后的日期不能选,点击某个日期,动态限制可选范围,前30天后30天,如果后30天有部分日期大于今天,同样限制大于今天的不可选：

先上图:

不墨迹 上代码!!

	<date-picker type="datetimerange"
	             ref="date"
	             format="yyyy-MM-dd HH:mm:ss"
	             placeholder="选择日期"
	             :options="dateOption"
	             @click.native="nativeClick"  >
	</date-picker>

	data () {
		dateOption: {},
	}

	methods:{
	   nativeClick() {
	     const target = this.$refs['date'].$refs['pickerPanel']
	     const { from, to } = target['rangeState']
	     console.log(from, to)
	     target.handlePickClick = () => {
	       const { from, selecting } = target['rangeState']
	       if (from && selecting) {
	         this.dateOption = {
	           disabledDate(value) {
	             const startTime = new Date(from)
	             const endTime = new Date(from)
	             startTime.setDate(from.getDate() - 30)
	             endTime.setDate(from.getDate() + 30)
	             return !(value >= startTime && value <= endTime) || value && value.valueOf() > Date.now()
	           }
	         }
	       }
	     }
	     if (from && ! to) {
	       this.dateOption = {
	         disabledDate(value) {
	           const startTime = new Date(from)
	           const endTime = new Date(from)
	           startTime.setDate(from.getDate() - 30)
	           endTime.setDate(from.getDate() + 30)
	           return !(value >= startTime && value <= endTime) || value && value.valueOf() > Date.now()
	         }
	       }
	     } else {
	       this.dateOption = {
	         disabledDate(value) {
	           return value && value.valueOf() > Date.now()
	         }
	       }
	     }
	   },
	 }

大功告成!OVER!!!
觉得有帮助的话登陆一下点个赞~谢谢!!!