美文网首页
element-ui2.12 日期选择器范围时间限制

element-ui2.12 日期选择器范围时间限制

作者: IamaStupid | 来源:发表于2020-06-18 16:22 被阅读0次
image.png

情形:签约月份选择了6月,那么下面的时间区间最大只能是六月一号到六月三十号,如果上面的月份没有选择,区间日期弹框里面的任何时间都被禁用。

代码:

// html 部分
<el-form-item label="合同签约月份" prop="contractSignMonth">
      <el-date-picker
        class="custom-date-picker"
        v-model="form.contractSignMonth"
        @change="handleMonthDateChange"
        value-format="yyyy年MM月"
        type="month">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="合同签约日期区间" prop="contractSign_Dates">
      <el-date-picker
        class="custom-date-picker"
        v-model="form.contractSign_Dates"
        value-format="yyyy-MM-dd"
        type="daterange"
        :picker-options="pickerOptions0"
        :default-value="defaultRangeDate"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>
// js
data () {
  return {
    form: {},
    pickerOptions0: {
        disabledDate: this.disabledDate
     },
     monthDateTime: [],
     defaultRangeDate: new Date()
  }
}
methods: {
  handleMonthDateChange (d) {
      if (typeof d === 'string') {
        let tDate = new Date(d.replace('年', '-').replace('月', ''))
        this.defaultRangeDate = tDate
        this.monthDateTime[0] = tDate.getTime() - 24 * 60 * 60 * 1000 - 1
        this.monthDateTime[1] = new Date(tDate.getFullYear() + '-' + (tDate.getMonth() + 2)).getTime() - 1
        // console.log('handleMonthDateChange:', d, tDate, this.monthDateTime)
      }
    },
    disabledDate (date) {
      // console.log('disabledDate:', date.getMonth() + 1, date.getTime(), this.monthDateTime[0])
      // 返回 true 表示是disabled的状态
      let bool = true
      if (this.form.contractSignMonth) {
        bool = date.getTime() < this.monthDateTime[0] || date.getTime() > this.monthDateTime[1]
      }
      return bool
    },
}

相关文章

网友评论

      本文标题:element-ui2.12 日期选择器范围时间限制

      本文链接:https://www.haomeiwen.com/subject/pcbuxktx.html