孪生兄弟
必须同时选中两个时间。
<el-form-item label="结算时间">
<el-date-picker
v-model="times"
value-format="yyyy-MM-dd HH:mm:ss"
style="width:100%;"
type="datetimerange"
unlink-panels
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
></el-date-picker>
</el-form-item>
监听times值的变化,把开始时间、结束时间分别赋给两个变量,以便传递到后端。
watch: {
"times":function(value){
if(value){
this.formInfo.settFinalTimeFrom = value[0] ;
this.formInfo.settFinalTimeTo = value[1];
} else {
this.formInfo.settFinalTimeFrom = '';
this.formInfo.settFinalTimeTo = '';
}
}
}
孑然一身
两人日历是独立的,如果有业务层面的业务规则,需要单独做校验。
<el-form-item label="结算时间">
<el-date-picker
v-model="formInfo.settFinalTimeFrom"
value-format="yyyy-MM-dd HH:mm:ss"
style="width:48%;"
type="datetime"
placeholder="开始时间"
default-time="00:00:00"
></el-date-picker>-
<el-date-picker
v-model="formInfo.settFinalTimeTo"
value-format="yyyy-MM-dd HH:mm:ss"
style="width:48%;"
type="datetime"
placeholder="结束时间"
default-time="23:59:59"
></el-date-picker>
</el-form-item>
checkParamValid() {
let from = this.formInfo.settFinalTimeFrom, to = this.formInfo.settFinalTimeTo;
if (from && to && from > to) {
this.$message({
message: '结算时间起始值应小于结束值!',
type: 'warning'
});
return false;
}
return true;
}