需求: DatePicker 类型用的month,然后区间规定不能超一年这样,超了不可选

<FormItem label='起始时间: '>
   <DatePicker type='month' placeholder='起始日期' v-model='startMonth' style='width: 100px' :options='startTimeOptions'></DatePicker>
</FormItem>
<FormItem label='结束时间: '>
   <DatePicker type='month' placeholder='结束日期' v-model='endMonth' style='width: 100px' :options='endTimeOptions'></DatePicker>
</FormItem>

<script>
 export default {
   name: '',
   data () {
     startMonth: '',
     endMonth: '',
     startTimeOptions: {
       disabledDate: date => {
          if (!this.endMonth) return;  // 结束日期为空值时直接返回
          let endTime = this.endMonth ? new Date(this.endMonth).valueOf() : Date.now();
          let startTime = this.endMonth ? new Date(this.endMonth).valueOf()-365*24*60*60*1000 : Date.now();
          return date && (date.valueOf()<startTime) || (date.valueOf()>endTime )
       }
     },
     endTimeOptions: {
       disabledDate: date => {
          if (!this.startMonth) return;  // 结束日期为空值时直接返回
          let endTime = this.startMonth? new Date(this.startMonth).valueOf()+365*24*60*60*1000 : Date.now();
          let startTime = this.startMonth? new Date(this.startMonth).valueOf() : Date.now();
          return date && (date.valueOf()<startTime) || (date.valueOf()>endTime)
       }
     }
   }
 }
</script>

在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐