vue中iviewUI日期DatePicker

2023-11-15  本文已影响0人  Simple_Learn

开始日期大于等于结束日期

data中添加

      startOption: {
        // 指定开始限制时间
        disabledDate: (date) => {
          let data = this.modelForm.endDate == '' ? Date.now() : this.modelForm.endDate
          return date > data
        }
      },
      endOption: {
        // 指定终止日期
        disabledDate: (date) => {
          let data = this.modelForm.startDate == '' ? '' : this.modelForm.startDate
          return date < data
        }
      },

template中

      <Row :gutter="20">
        <Col span="12">
        <FormItem prop="startDate" :label="开始日期">
          <DatePicker type="date" :options="startOption" v-model="modelForm.startDate"
            placeholder="请输入开始日期" size="small"
            format="yyyy-MM-dd"></DatePicker>
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem prop="endDate" :label="结束日期">
          <DatePicker type="date" :options="endOption" v-model="modelForm.endDate"
            placeholder="请输入结束日期" size="small"
            format="yyyy-MM-dd"></DatePicker>
        </FormItem>
        </Col>
      </Row>
上一篇 下一篇

猜你喜欢

热点阅读