1、直接上代码。
-
:value="form.regiestTimeStart" 用于数据的双向绑定
-
@on-change="timeFormatStar" 选择时间后,针对数据进行转换,用于数据提交
-
format="yyyy-MM-dd HH:mm:ss" 指定数据展示格式
-
:options="startTimeOptions" 设置规则(时间段)
<Col span="4">注册时间:</Col>
<Col span="8">
<DatePicker type="date" :value="form.regiestTimeStart" @on-change="timeFormatStar" format="yyyy-MM-dd HH:mm:ss" :options="startTimeOptions" placeholder="Select date"></DatePicker>
</Col>
<Col span="2">-</Col>
<Col span="8">
<DatePicker type="date" :value="form.regiestTimeEnd" @on-change="timeFormatEnd" format="yyyy-MM-dd HH:mm:ss" :options="endTimeOptions" placeholder="Select date"></DatePicker>
</Col>
2、js代码
return {
startTimeOptions: {}, //开始日期设置
endTimeOptions: {}, //结束日期设置
form:{
regiestTimeStart:"",
regiestTimeEnd:"",
}
}
},
//添加方法:
timeFormatStar(e){
this.form.regiestTimeStart = e;
this.endTimeOptions = {
disabledDate: date => {
let startTime = this.form.regiestTimeStart ? new Date(this.form.regiestTimeStart).valueOf() : '';
return date && (date.valueOf() < startTime);
}
}
},
timeFormatEnd(e){
this.form.regiestTimeEnd = e;
let endTime = this.form.regiestTimeEnd? new Date(this.form.regiestTimeEnd).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
this.startTimeOptions = {
disabledDate(date) {
return date && date.valueOf() > endTime;
}
}
},