el-date-picker默认结束为当前时分秒的操作方法
在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() } },
难点:默认选中当前时分秒
补充:
el-date-picker如果超过限制跨度则提示
需求:实现日期时间选择组件跨度如果超过限制天数,点击查询则提示超过限制时间
封装一个方法,传入开始和结束时间以及限制天数,如果超过则返回false
//计算时间跨度是否超过限制天数 isTimeSpanWithinLimit(startTime, endTime, limitDays) { const startDateTime = new Date(startTime) const endDateTime = new Date(endTime) const timeDifference = endDateTime - startDateTime const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24)) return daysDifference <= limitDays }
到此这篇关于el-date-picker默认结束为当前时分秒的文章就介绍到这了,更多相关el-date-picker时分秒内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
- element组件el-date-picker禁用当前时分秒之前的日期时间选择
- vue中el-date-picker选择日期的限制的项目实践
- el-date-picker设置日期默认值两种方法(当月月初至月末)
- Vue3+ElementPlus el-date-picker设置可选时间范围的示例代码
- vue中el-date-picker type=daterange日期清空时不回显的解决
- vue2使用el-date-picker实现动态日期范围demo
- el-date-picker日期范围限制的实现
- Element el-date-picker 日期选择器的使用
- elementUI组件中el-date-picker限制时间范围精确到小时的方法
- vue使用element-ui的el-date-picker设置样式无效的解决
- 简单设置el-date-picker的默认当前时间问题
最新评论