美文网首页
vue中iviewUI日期DatePicker

vue中iviewUI日期DatePicker

作者: Simple_Learn | 来源:发表于2023-11-15 16:02 被阅读0次

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

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>

相关文章

网友评论

      本文标题:vue中iviewUI日期DatePicker

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