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' } }