iview - 日期选择控件datePicker格式

缺乏、安全感 2021-09-19 12:58 787阅读 0赞

### 前言 ###

iview日期选择控件少一天问题  
        在时间控件中明明选择的是`2019-05-21`,但是当通过vue的调试器查看的时候，竟然是这样的  
![在这里插入图片描述][20190521223421701.jpg]  
    写法如下

导致这样结果的原因是通过v-model来绑定的绑定后获取的时间叫`utc`时间，  
    通过`value`和`@on-change`事件来绑定即可，(注意，用`@on-change`来获取时间的时候，就不能加`v-model`了，不然获取的时间还是老样子）

常见date选择控件

选取两个时间前后冲突常见规则

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

[20190521223421701.jpg]: /images/20210726/ed4a93e73cf44cd48618b7745875045c.png