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>