image.png

image.png

效果呢就是這么個(gè)效果，就是相互關(guān)聯(lián)限制而已，開始時(shí)間不能大于結(jié)束時(shí)間，結(jié)束時(shí)間不能小于開始時(shí)間。

代碼

<template>
  <div>
    <el-card class="box-card">
      <el-form :model="form" inline size="small" ref="form" label-width="140px">
        <el-form-item label="開始時(shí)間">
          <el-date-picker v-model="form.startDate" type="date" :picker-options="pickerStartDate" placeholder="選擇日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="結(jié)束時(shí)間">
          <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不是提供了一個(gè)封裝好的選擇開始和結(jié)束時(shí)間的插件嗎？對(duì)的！可是我們需求就是要分開，覺得不分開太丑，而且一個(gè)是必填一個(gè)不必填。

一個(gè)時(shí)間值拆分兩個(gè)字段，使用計(jì)算屬性

image.png

html

<el-form-item label="任務(wù)啟動(dòng)時(shí)間：">
  <el-date-picker 
    v-model="dateTime" 
    type="datetimerange" 
    range-separator="至" 
    start-placeholder="開始日期" 
    end-placeholder="結(jié)束日期" 
    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]
    }
  }
}

這樣你就不用轉(zhuǎn)來轉(zhuǎn)去了！

有時(shí)候很感嘆我寫得這么細(xì)了還有人說沒效果！于是我補(bǔ)上一個(gè)完整代碼！

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="開始時(shí)間">
          <el-date-picker v-model="form.startDate" type="date" :picker-options="pickerStartDate" placeholder="選擇日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="結(jié)束時(shí)間">
          <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="結(jié)束日期">
          </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>