element组件el-date-picker禁用当前时分秒之前的日期时间选择
更新时间:2023年01月05日 09:51:48 作者:橘子_fayC
本文主要介绍了element组件el-date-picker禁用当前时分秒之前的日期时间选择,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
element组件el-date-picker禁用当前时分秒之前的日期时间选择(包有用)
<el-date-picker v-model="expireDate" type="datetime" @change="handle" format='yyyy-MM-dd HH:mm:ss' value-format='yyyy-MM-dd HH:mm:ss' :picker-options="pickerOptions" placeholder="选择日期" />
data区域
data(){ return { pickerOptions: { disabledDate(time) { const date = new Date(); const oneday = date.getTime(); return time.getTime() < new Date().getTime() - 86400000; }, selectableRange: (() => { let data = new Date(); let hour = data.getHours(); let minute = data.getMinutes(); let second = data.getSeconds(); return [`${hour}:${minute}:${second} - 23:59:59`] })(), } }
el-date-picker添加日期约束(年月日时分秒)
<el-form-item label="开始日期" prop="startDate"> <el-date-picker v-model="sizeForm.startDate" :clearable='false' type="datetime" @change='changeStartTime' placeholder="开始日期" align="right"> </el-date-picker> </el-form-item> <el-form-item label="结束日期" prop="endDate"> <el-date-picker v-model="sizeForm.endDate" :clearable='false' type="datetime" @change='changeEndTime' placeholder="结束日期" align="right"> </el-date-picker> </el-form-item> data() { return { sizeForm: { startTime: null, endTime: null, }, // 开始和结束日期转换的时间戳 startTime: null, endTime: null, } } methods:{ //选择日期后触发change方法,将开始和结束时间转为时间戳进行对比,不符合约束条件就清空该日期重新选择 changeStartTime(val) { let date = new Date(val).getTime(); this.startTime = date; if (this.endTime) { if (this.endTime < this.startTime) { this.$message.success('开始时间不能大于结束时间'); this.sizeForm.startDate = ''; this.startTime = null; } } }, changeEndTime(val) { let date = new Date(val).getTime(); this.endTime = date; if (this.startTime) { if (this.endTime < this.startTime) { this.$message.success('结束时间不能小开始时间'); this.sizeForm.endDate = ''; this.endTime = null; } } }, }
到此这篇关于element组件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 日期选择器的使用
- elmentUI组件中el-date-picker限制时间范围精确到小时的方法
- vue使用element-ui的el-date-picker设置样式无效的解决
- 简单设置el-date-picker的默认当前时间问题
- el-date-picker默认结束为当前时分秒的操作方法
相关文章
vue el-table字段点击出现el-input输入框,失焦保存方式
这篇文章主要介绍了vue el-table字段点击出现el-input输入框,失焦保存方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02vue自定义指令添加跟随鼠标光标提示框v-tooltip方式
这篇文章主要介绍了vue自定义指令添加跟随鼠标光标提示框v-tooltip方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10基于el-table和el-pagination实现数据的分页效果
本文主要介绍了基于el-table和el-pagination实现数据的分页效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-08-08
最新评论