a-date-picker日期选择器的bug
bug描述:选择之后,打开选择器,日期混乱全部选中。
解决:给日期用dayjs转化一下。
import dayjs from dayjs; setForm.value.startTime= dayjs(record.startTime).format("YYYY-MM-DDTHH:mm:ssZ") setForm.value.endTime= dayjs(record.endTime).format("YYYY-MM-DDTHH:mm:ssZ")
开始时间小于结束时间的校验
const rules=ref({ code: [ { required: true, message: 请输入任务编码 }, { max: 18, message: 输入字符不能超过18个 }, { validator:checkVal } ], name: [ { required: true, message: 请输入任务名称 }, { max: 20, message: 输入字符不能超过20个 } ], // requestURL: [{ required: true, message: 请输入请求url }], startTime: [{ required: true, message: 请输入开始时间, trigger: [change] }, { validator: startliendtime }], endTime: [{ validator: endlgstatime, trigger: [change] }], cron: [{ required: true, message: 请输入Corn表达式,trigger: [change,blur] }], })
// 校验时间 function startliendtime (rule, value) { if(setForm.value.endTime){ formref.value.validate(endTime) if (setForm.value.endTime < value) { return Promise.reject(`开始时间不能大于结束时间`); } else { return Promise.resolve(); } } else { return Promise.resolve(); } } function endlgstatime (rule, value) { if (value > setForm.value.startTime) { return Promise.resolve(); } else { return Promise.reject(`计划结束时间必须大于计划开始时间`); } } // 校验code function checkVal (rule, value) { const reg = /[^x21-x7E]+/g isTrue.value = false showhelp.value = false if (codeDuplicate.value === 0) { if (reg.test(value)) { return Promise.reject(`只允许大写字母、小写字母、数字和特殊符号(除空格)`); } else { isTrue.value = true return Promise.resolve(); } } else { codeDuplicate.value = 0 return Promise.reject(`该编码已被占用,请重新输入`); } }
<a-form-item label="开始时间" name="startTime"> <a-date-picker format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DDTHH:mm:ssZ" v-model:value="setForm.startTime" placeholder="" style="width: 100%" :disabled="title == 详情" > </a-date-picker> </a-form-item> <a-form-item label="结束时间" name="endTime"> <a-date-picker format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DDTHH:mm:ssZ" v-model:value="setForm.endTime" style="width: 100%" placeholder="" > </a-date-picker> </a-form-item>
下一篇:
spring实现IOC的思路和方法