vue-时间控件以及时间控件校验
:model 数据区域:rules 规则校验<el-form ref="form" :model="rulesForm" :rules="rules" label-width="30%">1.同时出现两个日期选择列表<el-form-item label="止期" prop="endTime"><el-date-pickerv-model="rulesForm.end
·
:model 数据区域 :rules 规则校验
<el-form ref="form" :model="rulesForm" :rules="rules" label-width="30%">
1.同时出现两个日期选择列表
<el-form-item label="止期" prop="endTime">
<el-date-picker
v-model="rulesForm.endTime"
type="daterange"
unlink-panels
style="width: 100%;"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
2.每次出现一个日期选择列表
<el-form-item label="保单止期">
<el-date-picker
v-model="rulesForm.endDate1"
style="width: 50%;"
value-format="yyyy-MM-dd"
placeholder="起期"
></el-date-picker>
<el-date-picker
v-model="rulesForm.endDate2"
style="width: 50%;"
value-format="yyyy-MM-dd"
placeholder="止期"
></el-date-picker>
</el-form-item>
检验规则 required必须录入 trigger什么时候校验
endDate1: [
{ required: true, message: "请选择保单止期起期", trigger: ["change", "blur"] }
],
endDate2: [
{ required: true, message: "请选择保单止期止期", trigger: ["change", "blur"] }
]
校验方法
this.$refs.form.validate(valid => {
if (valid) {
// this.rulesForm.endDate1 = this.rulesForm.endTime[0];
// this.rulesForm.endDate2 = this.rulesForm.endTime[1];
止期不能大于起期
let timeFlag = new Date(this.rulesForm.endDate1).getTime() > new Date(this.rulesForm.endDate2).getTime()
if(timeFlag){
return this.$message({
message: "保单止期信息录入有误,请检查录入信息!",
type: "warning"
});}
更多推荐
已为社区贡献1条内容
所有评论(0)