el-date-picker 限制选择日期在一个月范围内

element-uiel-date-picker 设置选择范围在一个月内:

<template>
  <el-date-picker
    placeholder="请选择"
    unlink-panels
    :value="timeArr"
    type="datetimerange"
    range-separator=""
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd HH:mm:ss"
    :default-time="['00:00:00', '23:59:59']"
    :picker-options="pickerOptions"
    @input="change($event)"
  />
template>

<script>
export default {
  name: 'DatePicker', 
  props: {
    value: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      selectDate: '',
      // 日期时间范围在一个月以内
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = ''
          }
        },
        disabledDate: (time) => {
         if (this.selectDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }
    }
  },
  methods: {
    change(val) {
      this.$emit('input', val)
    }
  }
}
script>

页面效果:
el-date-picker 限制选择日期在一个月范围内_第1张图片

你可能感兴趣的:(#,Vue,2.x,vue.js,elementui,javascript)