孪生兄弟
必须同时选中两个时间。
<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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/17279.html
