网站app怎么制作,wordpress 邮件投稿,租用网络服务器的价格,通证电商平台现在有哪些想限制只能选日期间隔为一年#xff0c;联合选择器样式不好改#xff0c;使用俩单独的
有两个办法限制
1.一个在外层使用form通过表单验证控制#xff0c;出现错误提示#xff08;由于是两个单独的组件#xff0c;触发验证的方式又为单个失去焦点#xff0c;所以俩组件…想限制只能选日期间隔为一年联合选择器样式不好改使用俩单独的
有两个办法限制
1.一个在外层使用form通过表单验证控制出现错误提示由于是两个单独的组件触发验证的方式又为单个失去焦点所以俩组件无法实时更新
2.用datepick自带的属性disabledDate 为pick-options中的函数在js中绑定函数通过控制区间禁选不符合条件的日期触发方式在每次选择时间时可以实时更新无错误提示 1.form实现 form-html el-form refqueryForm :modelqueryParams inlineel-form-itempropstartDate:rules[{ required: true, message: 请选择开始日期 },{ validator: checkFinalPayTime, trigger: blur },]el-date-pickerv-modelqueryParams.startDate:clearablefalsetypedate:default-valuenew Date():disabledDatedisabledStartDate:value-formatYYYY - MM - DDplaceholder开始时间//el-form-itemel-form-itempropendDate:rules[{ required: true, message: 请选择开始日期 },{ validator: checkFinalPayTime, trigger: blur },]el-date-pickerv-modelqueryParams.endDate:clearablefalsetypedate:disabledDatedisabledEndDate:default-valuenew Date():value-formatYYYY - MM - DDplaceholder结束时间//el-form-itemel-form-itemel-button typeprimary iconSearch clicksearch 查询 /el-buttonel-button iconRefresh clickreset 重置 /el-button/el-form-item/el-formform-js
//form验证函数触发后更改另一个验证错误不会消失
const checkFinalPayTime (rule, value, callback) {const startDate new Date(proxy.queryParams.startDate).getTime();const endDate new Date(proxy.queryParams.endDate).getTime();console.log(startDate, endDate);console.log(startDate 31536000000 endDate);if (startDate 31536000000 endDate) {return callback(new Error(起止日期不能超过一年));} else {callback();}
}; 2.代码实现 disabledDate-html
el-form refqueryForm :modelqueryParams inlineel-date-pickerv-modelqueryParams.startDate:clearablefalsetypedate:default-valuenew Date():disabledDatedisabledStartDate:value-formatYYYY - MM - DDplaceholder开始时间/el-date-pickerv-modelqueryParams.endDate:clearablefalsetypedate:disabledDatedisabledEndDate:default-valuenew Date():value-formatYYYY - MM - DDplaceholder结束时间//el-form disabledDate-js
const disabledStartDate (time) {const endDate new Date(proxy.queryParams.endDate);return (//选择时间比结束时间减一年大time.getTime() endDate.getTime() - 31536000000 ||//选择时间比结束时间小time.getTime() endDate.getTime());
};
const disabledEndDate (time) {const startDate new Date(proxy.queryParams.startDate);return (//选择时间比开始时间加一年小time.getTime() startDate.getTime() 31536000000 ||//选择时间比开始时间大time.getTime() startDate.getTime());
};
