iview - 日期選擇控件datePicker格式

前言

    iview日期選擇控件少一天問題
        在時間控件中明明選擇的是2019-05-21,但是當通過vue的調試器查看的時候，竟然是這樣的

    寫法如下

<FormItem label="開始時間" prop="startTime">
  <DatePicker
    type="datetime"
    v-model="formData.startTime"
    format="yyyy-MM-dd HH:mm:ss"
    placeholder="請輸入開始時間"
    :options="startTimeOptions"
    @on-ok="startTimeChoose"></DatePicker>
</FormItem>

    導致這樣結果的原因是通過v-model來綁定的綁定後獲取的時間叫utc時間，
    通過value和@on-change事件來綁定即可，(注意，用@on-change來獲取時間的時候，就不能加v-model了，不然獲取的時間還是老樣子）

 <FormItem label="開始時間" prop="startTime">
  <DatePicker
    type="datetime"
    format="yyyy-MM-dd HH:mm:ss"
    placeholder="請輸入開始時間"
    :value="formData.startTime"
    :options="startTimeOptions"
    @on-ok="startTimeChoose"
    @on-change="formData.startTime=$event"></DatePicker>
</FormItem>

    常見date選擇控件

<FormItem label="日期">
  <DatePicker
    format="yyyy-MM-dd"
    type="date"
    placeholder="請選擇日期"
    @on-change="condition.date=$event"></DatePicker>
</FormItem>

選取兩個時間前後衝突常見規則

<template>
  <div>
    <Form ref="formRef" :model="formData" :rules="rules">
      <FormItem label="開始時間" prop="startTime">
        <DatePicker
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          placeholder="請輸入開始時間"
          :value="formData.startTime"
          :options="startTimeOptions"
          @on-ok="startTimeChoose"
          @on-change="formData.startTime=$event"></DatePicker>
      </FormItem>
      <FormItem label="結束時間" prop="endTime">
        <DatePicker
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          placeholder="請輸入結束時間"
          :value="formData.endTime"
          :options="endTimeOptions"
          @on-open-change="endTimeOpen"
          @on-change="formData.endTime=$event"></DatePicker>
      </FormItem>
    </Form>
    
  </div>
</template>
<script>
export default {
  name: 'dataPicker',
  data () {
    return {
      formData: {
        startTime: '',
        endTime: ''
      },
      startTimeOptions: {
        disabledDate: date => {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      endTimeOptions: {},
      rules: {
        startTime: [{ required: true, message: '開始時間不能爲空', trigger: 'blur' }],
        endTime: [{ required: true, message: '結束時間不能爲空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    // 結束時間範圍
    'formData.startTime': function (val) {
      this.endTimeOptions = {
        disabledDate: date => {
          return date && date.valueOf() < new Date(this.formData.startTime).getTime() + 86400000
        }
      }
    }
  },
  methods: {
    // 開始時間驗證
    startTimeChoose () {
      if (new Date(this.formData.startTime) - new Date(this.formData.endTime) > 0) {
        this.$Message.warning('開始時間早於結束數時間')
        this.formData.startTime = ''
      }
    },
    // 結束時間驗證
    endTimeOpen () {
      if (!this.formData.startTime) {
        this.$Message.warning('請先選擇開始時間')
        this.formData.endTime = ''
      }
    },
  }
}
</script>