elementUI date-picker组件

孪生兄弟

必须同时选中两个时间。

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