iView Form表單與DatePicker日期選擇器

DatePicker 的類型為datatimerange時的表單校驗

<template>
     <Form
         ref="imageEditForm"
         :model="formItem"
         label-position="left"
         :rules='ruleValidate'
         :label-width="100">
         <FormItem label="活動時間"
               prop="activeTime"
              :label-in-value="true"
               class="selected__form">
                <Date-picker type="datetimerange"
                      placement="bottom" placeholder="選擇日期"
                      :value='[formItem.startTime,formItem.endTime]'
                      @on-change="setDateRange"
                      format="yyyy-MM-dd hh:mm:ss"
                      style="width: 300px" />
             </FormItem>
             <FormItem>
            <Button type="primary" @click="handleSubmit('imageEditForm')">Submit</Button>
            <Button @click="handleReset('imageEditForm')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
                formItem: {
                  activeTime:[],
                  startTime: [],
                  endTime:[]
                },
                ruleValidate: {
                   activeTime: [
                        { required: true,
                          type:'array',
                          fields: {
                              0: { required: true, message: '請選擇時間范圍', trigger: 'blur' },
                              1: { required: true, message: '請選擇時間范圍', trigger: 'blur' }
                          }
                        }
                    ],
                }
            }
        },
        methods: {
         setDateRange (value) {
                const isDeepEqual = (one, another) => _.isEqual(one, another);
                if (isDeepEqual(value, this.selectedDateRange) || value[0] === '') {
                    this.selectedDateRange = ['2018-01-01 00:00:00', new Date().toLocaleString()];
                } else {
　　　　　　        this.formItem.startTime= value[0]
　　　　　　        this.formItem.endTime= value[1]
                  this.formItem.activeTime = value
                }
            },
        },
        handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
    }
</script>  

　　在這里，還解決了雙向綁定的問題。在type=datetimerange中，不能使用v-modle實現雙向綁定，而是要使用:value的方法。注意format的數據格式，應該保持一致。