当前位置:网站首页>elemntUI限制时间选择器不能跨月并且不大于未来时间
elemntUI限制时间选择器不能跨月并且不大于未来时间
2022-08-11 11:38:00 【小太阳...】
限制时间选择器不能跨月,并且不能选择未来时间
代码如下:
<el-date-picker
v-modal="selectDate"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
:default-time="['00:00:00', '23:59:59']"
range-separator="至"
:picker-options="pickerOptionsMonth"
@change="changeDate">
</el-date-picker>
data() {
return {
selectDate: '',
selectTime: '',
// 只能选取某一个月的时间
pickerOptionsMonth: {
onPick: ({
maxDate, minDate }) => {
this.selectTime = minDate.getTime();
if (maxDate) {
this.selectTime = '';
}
},
disabledDate: time => {
let nowDay = new Date()
nowDay.setHours(23);//设置小时
nowDay.setMinutes(59);//设置分钟
nowDay.setSeconds(59);//设置秒
nowDay.setMilliseconds(59);//设置毫妙
let timestamp = nowDay.getTime();//获取时间戳
if (this.selectTime !== '') {
const selectDate = new Date(this.selectTime)
const nowYear = selectDate.getFullYear() // 当前年
const nowMonth = selectDate.getMonth() // 当前月
// 本月的开始时间
const monthStartDate = new Date(nowYear, nowMonth, 1).getTime()
// 本月的结束时间
const monthEndDate = new Date(nowYear, nowMonth + 1, 0).getTime()
return time.getTime() >= timestamp || time.getTime() < monthStartDate || time.getTime() > monthEndDate
} else {
return time.getTime() >= timestamp
}
}
},
}
},
method: {
// 防止输入的时间跨月,如果输入时间跨月清空时间并提示
changeDate(val) {
//时间点选择改正
if(val!= null){
var statr = val[0],end = val[1]
var val= statr +'至'+ end;
// 时间判断不能跨月
if (statr.substring(0, 7) !== end.substring(0, 7)) {
this.$message.warning('查询支付时间不能跨月')
val = null
this.selectDate= ''
}
}
}
}
边栏推荐
- 【毕业设计】远程智能浇花灌溉系统 - stm32 单片机 嵌入式 物联网
- 2022-08-10北京华为OD机试真题分享
- Jmeter性能测试
- 【学生个人网页设计作品】使用HMTL制作一个超好看的保护海豚动物网页
- d,cast转换aa为右值
- How long does it take to train a neural network, neural network training takes too long
- 【学生毕业设计】基于web学生信息管理系统网站的设计与实现(13个页面)
- Web3 Entrepreneur's Guide: How to Build a Decentralized Community for Your Product?
- VirtualLab:Ince-Gaussian光束产生涡旋阵列激光束的观测
- AWS、Splunk和Symantec牵头成立OCSF开放网络安全架构框架
猜你喜欢
随机推荐
Starting from zero configuration vim (11) -- plug-in management
威佐夫博弈
云原生 · 镜像详解
Tool_RE_IDA基础字符串修改
Five minutes to teach you intranet penetration
SQL Runtime SLX中的优化设计有哪些?
十九、一起学习Lua 垃圾回收
在华门店数超星巴克,瑞幸咖啡完成“逆袭”?
基于数据库实现通用异步缓存系统
2022 OceanBase 年度发布会:发布四大策略,迈入4.0时代
Uber的20万容器实践:如何避免容器化环境中的 CPU 节流
OpenHarmony如何选择图片在Image组件上显示(eTS)
爆赞!阿里P8首次分享出基于Docker的企业级Redis实战开源笔记
莫队学习总结
开发者时薪高达1200美元?一文带你走近Move语言的编程魅力!
如何用100元制作一块全志V853的AI 开发板
2022-08-10北京华为OD机试真题分享
Jetpack Compose学习(9)——Compose中的列表控件(LazyRow和LazyColumn)
开源汇智创未来 | 软通动力出席开放原子全球开源峰会OpenAtom openEuler分论坛
《长津湖》和《三十而已》,不及王一博赚钱?









