vue项目中view-ui两个时间选择器的判断开始时间不大于结束时间（二）

禁用日历上面的日期，代码如下：

  1 <template>
  2   <Form
  3     ref="formItem"
  4     :model="formItem"
  5     :rules="rulesForm"
  6     :label-width="170"
  7     label-position="left"
  8   >
  9     <!-- 临时开放日期 -->
 10     <Form-item label="临时开放开始日期" prop="starttime">
 11       <Date-picker
 12         type="date"
 13         placeholder="请选择可临时开放开始日期"
 14         name="lskfksrq"
 15         v-model="formItem.starttime"
 16         style="width: 400px"
 17         :options="optionsStart"
 18       ></Date-picker>
 19     </Form-item>
 20     <!-- 临时开放截止日期 -->
 21     <Form-item label="临时开放截止日期" prop="endtime">
 22       <Date-picker
 23         type="date"
 24         placeholder="请选择可临时开放截止日期"
 25         name="lskfjzrq"
 26         v-model="formItem.endtime"
 27         style="width: 400px"
 28         :options="optionsEnd"
 29       ></Date-picker>
 30     </Form-item>
 31     <Form-item>
 32       <i-button type="primary" @click="handleSubmit('formItem')">提交</i-button>
 33       <i-button @click="handleReset('formItem')" style="margin-left: 8px">重置</i-button>
 34     </Form-item>
 35   </Form>
 36 </template>
 37 <script>
 38 export default {
 39   data () {
 40     return {
 41       formItem: {
 42         starttime: '', // 临时开放开始日期
 43         endtime: '' // 临时开放截止日期
 44       },
 45       optionsStart: {
 46         disabledDate () {
 47         }
 48       },
 49       optionsEnd: {
 50         disabledDate () {
 51         }
 52       },
 53       // 校验规则
 54       rulesForm: {
 55         starttime: [
 56           {
 57             required: true,
 58             type: 'date',
 59             message: '*请选择临时开放开始日期'
 60           }
 61         ],
 62         endtime: [
 63           {
 64             required: true,
 65             type: 'date',
 66             message: '*请选择临时开放截止日期'
 67           }
 68         ]
 69       }
 70     }
 71   },
 72   methods: {
 73     handleSubmit (name) {
 74       this.$refs[name].validate(valid => {
 75         if (valid) {
 76           this.$Message.success('Success!')
 77         } else {
 78           this.$Message.error('Fail!')
 79         }
 80       })
 81     },
 82     handleReset (name) {
 83       this.$refs[name].resetFields()
 84     }
 85   },
 86   // 监视开始时间和截止时间变化
 87   watch: {
 88     'formItem.endtime' () {
 89       const _this = this
 90       this.optionsStart.disabledDate = function (date) {
 91         return date.valueOf() > +new Date(_this.formItem.endtime)
 92       }
 93     },
 94     'formItem.starttime' () {
 95       const _this = this
 96       this.optionsEnd.disabledDate = function (date) {
 97         return date.valueOf() < +new Date(_this.formItem.starttime)
 98       }
 99     }
100   }
101 }
102 </script>

标签：vue,name,formItem,disabledDate,时间,starttime,date,endtime,选择器
来源： https://www.cnblogs.com/yihengbaobei/p/12906776.html