el-date-picker默认结束为当前时分秒

最新推荐文章于 2024-05-14 09:39:57 发布

前端搬砖达人

最新推荐文章于 2024-05-14 09:39:57 发布

阅读量1.5k

点赞数 8

文章标签： elementui javascript vue

本文链接：https://blog.youkuaiyun.com/wyq12138/article/details/135655779

版权

文章描述了如何在ElementUI的日期时间范围选择器中，设置默认结束时间为当前时分秒，同时处理了如何避免用户选择未来时间的逻辑。作者分享了关键代码和校验部分，着重解决默认选中当前时间的难点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在element ui中的日期时间选择组件中默认是00:00,现在需求是点击默认结束时间为当前时分秒，查了很多资料写的都不准确

需求：实现日期时间组件可选择当前日期，比如当前是2024年01月17号下午17：21 那选中时必须结束时间为17：21 也可选01月17号当天其他的时间（很多文章超过17：21都不能选了，搞得我头疼

在这里插入图片描述
效果如下：

不多说，上代码：

 :default-time="['00:00:00', new Date().toLocaleTimeString('chinese', { hour12: false })]"

设置当前默认结束时间new Date().toLocaleTimeString(‘chinese’, { hour12: false })

布局

这里主要代码是

 <el-form-item prop="carDate">
	<el-date-picker
	   v-model="ruleForm.carDate"
	   :picker-options="pickerOptions"
	   type="datetimerange"
	   value-format="yyyy-MM-dd HH:mm:ss"
	   :default-time="['00:00:00', new Date().toLocaleTimeString('chinese', { hour12: false })]"
	   range-separator="至"
	   start-placeholder="开始时间"
	   end-placeholder="结束时间"
	 >
	 </el-date-picker>
	</el-form-item>

校验

   pickerOptions: {
        disabledDate: time => {     
          return time.getTime() > Date.now()
        }
      },

难点：默认选中当前时分秒