element plus校验日期格式为 type=“datetimerange“的方法

校验日期格式为数组格式时 :rules=[{type:“arr”,…}] 失效

可以按照如下方法校验日期开始结束时间

   rules: {
   			planDate:[{
			        type: "array",
			        required: true,
			        message: "请选择计划周期",
			        trigger: "change",
			        fields: {
			          0: { type: "date", required: true, message: "请选择开始日期" },
			          1: { type: "date", required: true, message: "请选择结束日期" }
			        }
			}]
	}

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现这个功能,你需要在`el-date-picker`组件中设置`picker-options`属性,该属性可以接收一个 JavaScript 对象。在该对象中,你可以使用`beforeConfirm`属性来设置只能选择整五分钟的逻辑,示例代码如下: ```html <template> <el-date-picker type="datetimerange" v-model="dateRange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" ></el-date-picker> </template> <script> export default { data() { return { dateRange: [], pickerOptions: { beforeConfirm: (dates, vm) => { const minDatetime = new Date(dates[0]).getTime(); const maxDatetime = new Date(dates[1]).getTime(); // 取整到最近的整五分钟 const minDatetimeRound = Math.ceil(minDatetime / 300000) * 300000; const maxDatetimeRound = Math.floor(maxDatetime / 300000) * 300000; if (minDatetimeRound >= maxDatetimeRound) { // 如果选择的时间不符合要求,则不允许确认选择 vm.$message.error("请选择整五分钟的时间范围"); return false; } // 将取整后的时间设置到选择器中 vm.datePicker.minDate = new Date(minDatetimeRound); vm.datePicker.maxDate = new Date(maxDatetimeRound); // 返回 true,表示可以确认选择 return true; }, }, }; }, }; </script> ``` 在这个示例中,我们通过`beforeConfirm`事件来实现只能选择整五分钟的功能。在事件处理函数中,我们取出选择的时间范围,并将其取整到最近的整五分钟。如果选择的时间不符合要求,则会弹出错误提示,并返回 false;否则,我们将取整后的时间设置到选择器中,然后返回 true,表示可以确认选择。注意,在`beforeConfirm`事件中,我们可以通过`vm.datePicker`来访问选择器实例,从而对其进行操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值