vue 开始时间与结束时间跨度不超过3年,默认3年

需求:

写了一个详情页的弹框,有开始时间跟结束时间,默认结束时间取值银行日(接口获取)开始时间到结束时间3年,要求跨度不超过3年,默认三年(超过就红字提示)

效果图

代码

HTML

<Form inline ref='transCondition' :rules='transConditionRules'>
   <FormItem label='开始时间: ' prop='validTransDate'>
     <Date-picker v-model='startTime' type='date' format='yyyy-MM-dd' placeholder='选择开始时间'></Date-picker>
   </FormItem>
   <FormItem label='结束时间: ' prop='validTransDate'>
     <Date-picker v-model='endTime' type='date' format='yyyy-MM-dd' placeholder='选择结束时间'></Date-picker>
   </FormItem>
</Form>

js

<script type='text/javascript'>
 import moment from 'moment'   // 时间戳处理npm安装的依赖
 export default {
   name: '',
   data () {
     return {
       transConditionRules: {    // rules
         validTransDate: [{      // prop
            validator: this.getTransDate,
            type: 'date',
            trigger: 'change'
         }]
       },
       startTime: '',
       endTime: ''
     }
   },
   created () {},
   mounted () {
      this.endTime = new Date()  // 取值今天
      this.startTime = moment(this.endTime).subtract(3, 'year').toDate()  // 开始时间往前3年
   },
   methods: {
     getTransDate (rule, val, callback) {
       this.validateDate(this.startTime, this.endTime,  rule, val, callback)
     },
     
     validateDate (start, end,  rule, val, callback) {
       let result = ''
       
       if (start && end && start.getTime() > end.getTime()) { // 判断开始时间不能大于结束时间
         result = '开始日期大于结束日期'
       }
       
       if (start && end && start.getTime() < (this.initDeStartDate(end).getTime())) {
         result = '查询日期间隔不能超过3年'
       }
       
       if (result) {
         callback(new Error(result))
       } else {
         callback()
       }
       
     },
     
     initDeStartDate (time) {
        let date = new Date(time)
        date.setFullYear(date.getFullYear() - 3)
        return date;
     }
   }
 }
</script>