element-ui开始时间和结束时间

image.png image.png

效果呢就是这么个效果，就是相互关联限制而已，开始时间不能大于结束时间，结束时间不能小于开始时间。

代码

<template>
  <div>
    <el-card class="box-card">
      <el-form :model="form" inline size="small" ref="form" label-width="140px">
        <el-form-item label="开始时间">
          <el-date-picker v-model="form.startDate" type="date" :picker-options="pickerStartDate" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="form.closeDate" type="date" :picker-options="pickerCloseDate" placeholder="选择日期" size="medium">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        startDate: null,
        closeDate: null
      },
      pickerStartDate: {
        disabledDate: time => {
          if (this.form.closeDate) {
            return time.getTime() > this.form.closeDate
          }
        }
      },
      pickerCloseDate: {
        disabledDate: time => {
          return time.getTime() < this.form.startDate
        }
      }
    }
  }
}
</script>

有人说了，element-ui不是提供了一个封装好的选择开始和结束时间的插件吗？对的！可是我们需求就是要分开，觉得不分开太丑，而且一个是必填一个不必填。

一个时间值拆分两个字段，使用计算属性

image.png

html

<el-form-item label="任务启动时间：">
  <el-date-picker 
    v-model="dateTime" 
    type="datetimerange" 
    range-separator="至" 
    start-placeholder="开始日期" 
    end-placeholder="结束日期" 
    size="medium">
  </el-date-picker>
</el-form-item>

data最后要求提交的字段

taskForm: {
  startTime: null,
  endTime: null
}

computed处理获取和赋值

computed: {
   dateTime: {
    get() {
      if (this.taskForm.startTime && this.taskForm.endTime) {
         return [this.taskForm.startTime, this.taskForm.endTime]
       } else {
         return []
      }
    },
    set(v) {
      // console.log(v)
      this.taskForm.startTime = v[0]
      this.taskForm.endTime = v[1]
    }
  }
}

这样你就不用转来转去了！

有时候很感叹我写得这么细了还有人说没效果！于是我补上一个完整代码！

image.png

<template>
  <div>
    <el-card class="box-card">
      <el-form :model="form" inline size="small" ref="form" label-width="140px">
        <el-form-item label="开始时间">
          <el-date-picker v-model="form.startDate" type="date" :picker-options="pickerStartDate" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="form.closeDate" type="date" :picker-options="pickerCloseDate" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="有效期">
          <el-date-picker v-model="dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      form: {<br>
        startDate: {{form.startDate}}, <br>
        closeDate: {{form.closeDate}}, <br>
        startTime: {{form.startTime}}, <br>
        endTime: {{form.endTime}} <br>
      },
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        startDate: null,
        closeDate: null,
        startTime: null,
        endTime: null
      },
      pickerStartDate: {
        disabledDate: time => {
          if (this.form.closeDate) {
            return time.getTime() > this.form.closeDate
          }
        }
      },
      pickerCloseDate: {
        disabledDate: time => {
          return time.getTime() < this.form.startDate
        }
      }
    }
  },
  computed: {
    dateTime: {
      get() {
        if (this.form.startTime && this.form.endTime) {
          return [this.form.startTime, this.form.endTime]
        } else {
          return []
        }
      },
      set(v) {
        // console.log(v)
        this.form.startTime = v[0]
        this.form.endTime = v[1]
      }
    }
  }
}
</script>