iView DatePicker常见问题（验证不通过、动态取值范围、初始值、取值等）

目录

1.如何解决验证不通过问题

2.如何动态定义取值范围 

3.如何取组件的值

4.如何给组件赋初始值

---

组件 

<FormItem label="活动时间" prop="eventDate">
        <DatePicker type="datetimerange" :options="datePickerOptions"  @on-change="eventDateChange" placeholder="请选择活动时间" style="width: 300px" v-model="eventDate"></DatePicker>
      </FormItem>

 <FormItem label="报名截止时间" prop="applyEndDate" >
        <DatePicker type="datetime"  fromat="datetime" placement="bottom-end" :options="applyEndDateOptions" @on-change="applyEndDateChange" v-model="applyEndDate" placeholder="报名截止时间" style="width: 200px"></DatePicker>
      </FormItem>

1.如何解决验证不通过问题

 eventDate: [
                {
                  type: 'array',
                  required: true,
                  fields: {
                    0: {type: 'date', required: true, message: '请选择起止日期'},
                    1: {type: 'date', required: true, message: '请选择起止日期'}
                  }
        }
        ],
        applyEndDate: [
          { required: true, message: "截止日期不能为空.", trigger: "blur", pattern: /.+/ },
        ],

2.如何动态定义取值范围 

return {

//....

datePickerOptions: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      },

      eventDate: [],
      applyEndDate: undefined,

      applyEndDateOptions: {
        disabledDate: date => {
          let beginDate = this.eventDate ? new Date(this.eventDate[0]).valueOf() : Date.now() - 86400000;
          return this.eventDate ? (date &&  (date.valueOf() >  beginDate || date.valueOf() < Date.now() - 86400000) ) : (date && date.valueOf() < Date.now() - 86400000);
        }
      },

}

3.如何取组件的值

 eventDateChange(){
      this.eventForm.beginDate = DateUtil.formatDate(this.eventDate[0],'yyyy-MM-dd hh:mm:ss');
      this.eventForm.endDate = DateUtil.formatDate(this.eventDate[1],'yyyy-MM-dd hh:mm:ss');
    },

    applyEndDateChange(){
      this.eventForm.applyEndDate = DateUtil.formatDate(this.applyEndDate,'yyyy-MM-dd hh:mm:ss');
    },

4.如何给组件赋初始值

添加 ：value

 <FormItem label="活动时间" prop="eventDate">
                <DatePicker type="datetimerange" :options="datePickerOptions"  @on-change="eventDateChange" placeholder="请选择活动时间" style="width: 300px" v-model="eventDate" :value="eventDate"></DatePicker>
            </FormItem>

 this.eventDate = [''+this.eventForm.beginDate,''+this.eventForm.endDate];
 this.applyEndDate = this.eventForm.applyEndDate;