使用DatePicker的type是datetimerange时,处理开始--结束的持续时间校验如下。
遇到的问题:
时间弹出校验提示,但是程序还是会继续往下走,所以调完校验后,再做判断开始时间是否为true,再调接口。
view:
<Col span="8"> <FormItem label="时间段:" prop="dates"> <DatePicker type="datetimerange" placeholder="Select date" v-model="formValidate.dates" style="width: 100%" @on-change="changeTime"> </DatePicker> </FormItem> </Col> <Col span="8"> <FormItem class="inline-submit"> <Button type="primary" @click="queryClick">查询</Button> </FormItem> </Col>
js:
1 *****data: 2 formValidate: { 3 name: '', 4 dates: [] 5 }, 6 7 ruleValidate: { //表单校验 8 name: [ 9 {required: true, message: 'The name cannot be empty', trigger: 'blur'} 10 ], 11 dates: [{ 12 required: true, 13 type: 'array', 14 message: "Please select the date", 15 trigger: 'blur', 16 fields: { 17 0: {type: "date", required: true, message: "Please select the date"}, 18 1: {type: "date", required: true, message: "Please select the date"} 19 } 20 }] 21 }, 22 23 24 *******methods: 25 handleSubmit(name) { 26 this.$refs[name].validate((valid) => { 27 if (valid) { 28 this.$Message.success('Success!'); 29 } else { 30 this.$Message.error('Fail!'); 31 } 32 }); 33 }, 34 35 queryClick() { 36 this.handleSubmit('formValidate1'); 37 if (this.startDate) { 38 this.stationRequest(); //调接口 39 } 40 },
// 时间触发
changeTime(val) {
this.startDate = val[0];
this.endDate = val[1];
}