> 文档中心 > Ant Design Vue 日期组件的时间限制

Ant Design Vue 日期组件的时间限制

我介绍的日期组件是封装成单独的一个日期组件

是由用下面这个日期组件拼接组成.

而不是一个完整的开始时间和结束时间组件 

以下: 

        开始时间不能选择当天日期;

        结束时间不能小于开始时间;

 

 上代码:

disabled-date 是禁用属性

        j-date就是封装的日期子组件 :

        父组件:

 这是开始和结束 方法:

​// 处理选择时间    // 开始    disabledStartDate(val) {      // console.log(val,this.queryParam.endDate,'开始');      if (this.queryParam.endDate) { // return val && val > moment().endOf('day') return (   val > moment(this.queryParam.endDate, 'YYYY-MM-DD').subtract(1, 'days').startOf('day') &&   val > moment().subtract(1, 'days').startOf('day') )      } else { return val >= moment().startOf('day') // return true;      }    },    // 结束    disabledEndDate(val) {      // console.log(val,this.queryParam.startDate,'结束');      if (this.queryParam.startDate) { console.log(val.format('YYYY-MM-DD'), this.queryParam.startDate, moment().startOf('day').format('YYYY-MM-DD')) return val  moment().endOf('day')      } else { return val >= moment().endOf('day')      }    },​

     子组件:

    你的子组件里面要把一下写进去

:disabled-date="disabledDate" // 在pros里面把父组件里面的disabled-date接收props: {      disabledDate:{ type: Function, required: false      },}
    import moment from 'moment'  export default {    name: 'JDate',    props: {      disabledDate:{ type: Function, required: false      },      placeholder:{ type: String, default: '', required: false      },      value:{ type: String, required: false      },      dateFormat:{ type: String, default: 'YYYY-MM-DD', required: false      },      //此属性可以被废弃了      triggerChange:{ type: Boolean, required: false, default: false      },      readOnly:{ type: Boolean, required: false, default: false      },      disabled:{ type: Boolean, required: false, default: false      },      showTime:{ type: Object|Boolean, required: false, default: false      },      getCalendarContainer: { type: Function, default: (node) => node.parentNode      },    },    data () {      let dateStr = this.value;      return { decorator:"", momVal:!dateStr?null:moment(dateStr,this.dateFormat)      }    },    watch: {      value (val) { if(!val){   this.momVal = null }else{   this.momVal = moment(val,this.dateFormat) }      }    },    methods: {      moment,      handleDateChange(mom,dateStr){ this.$emit('change', dateStr);      },  },    //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼    model: {      prop: 'value',      event: 'change'    }  }