当前位置:网站首页>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= ''
}
}
}
}
边栏推荐
猜你喜欢
兴盛优选:时序数据如何高效处理?
TX12 + ExpressLRS 915MHz RC控制链路配置及问题汇总
五分钟教你内网穿透
如何用100元制作一块全志V853的AI 开发板
OpenHarmony如何选择图片在Image组件上显示(eTS)
VirtualLab:Ince-Gaussian光束产生涡旋阵列激光束的观测
TX12 + ExpressLRS RC configuration and control link problem summary 915 MHZ
那些不用写代码也能做游戏的工具
简单记录openguass_exporter对接prometheus通过grafanai来实现可视化监控
Volatile关键字的作用
随机推荐
或命名“狙击手” 长安全新皮卡申报图
Jetpack Compose学习(9)——Compose中的列表控件(LazyRow和LazyColumn)
OpenHarmony如何选择图片在Image组件上显示(eTS)
Typora表格中常用操作
SM5200原厂SOT23-6 500mA 线性锂电子替代芯片
单峰函数极值问题的解决方案 : 三分 & 二分与三分的本质区别
The fertile soil cloud innovation plan is coming
开发者时薪高达1200美元?一文带你走近Move语言的编程魅力!
阿里云慢下来了?
巧用自定义函数,文本控件秒变高速缓存
参与openEuler社区不到1年,我成为了Maintainer……
莫队学习总结
PerfView专题 (第一篇):如何寻找热点函数
Common operations in Typora tables
Visual Studio: Arm64EC官方支持来了
同城是美团电商的解法吗?
简化供采交易路径,B2B电子交易系统实现钢铁行业全链路数字化
【2022】【Thesis Notes】Ultra-thin THz deflection based on laser direct writing graphene oxide paper——
openEuler小程序会议指南
d包含区间