当前位置:网站首页>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= ''
}
}
}
}
边栏推荐
- BAT "exclusive" Internet giant Android senior engineer interview questions: 174 questions allow you to do the interview
- AWS、Splunk和Symantec牵头成立OCSF开放网络安全架构框架
- 何为API服务网关
- 【毕业设计】老人心率脉搏血压体征监测手表 - stm32 单片机 嵌入式 物联网
- TiSpark 原理之下推丨TiDB 工具分享
- 爆赞!阿里P8首次分享出基于Docker的企业级Redis实战开源笔记
- 阿里云 Hologres助力好未来网校实时数仓降本增效
- 【毕业设计】远程智能浇花灌溉系统 - stm32 单片机 嵌入式 物联网
- 重要消息丨.NET Core 3.1 将于今年12月13日结束支持
- Ince-Gaussian mode
猜你喜欢

EastWave应用:负折射现象实时演示

EXCLUSIVE INTERVIEW | INTELLIGENCE IS SPONTANED, NOT PLANNED: Evolution Fan, Former OpenAI Research Manager and UBC Associate Professor Jeff Clune

centos linux 下安装mysql 8.0

开源汇智创未来 | 软通动力出席开放原子全球开源峰会OpenAtom openEuler分论坛

Azure IoT & NVIDIA Jetson 开发基础

C语言,怪题小谈

【项目篇- 项目团队部分怎么写、如何作图?(两千字图文总结建议)】创新创业竞赛项目计划书、新苗国创(大创)申报书、挑战杯创业计划竞赛

如何用100元制作一块全志V853的AI 开发板
![C# Call AutoNavi Map API to obtain latitude, longitude and positioning [Detailed 4D explanation with complete code]](/img/39/75a32a787c4e85026a768fd5781f25.png)
C# Call AutoNavi Map API to obtain latitude, longitude and positioning [Detailed 4D explanation with complete code]

巧用自定义函数,文本控件秒变高速缓存
随机推荐
Summary of darknet structures
【2022】【Thesis Notes】Ultra-thin THz deflection based on laser direct writing graphene oxide paper——
黑马瑞吉外卖之公共字段自动填充
2022-08-10北京华为OD机试真题分享
Neural network visualization has 3 d version of the, the United States to fall!(open source)
98转出0转入,985高校土木工程沦为“天坑”引热议
Typora表格中常用操作
Go编译原理系列10(逃逸分析)
SQL Runtime SLX主要包括哪两方面?
centos linux 下安装mysql 8.0
何为API服务网关
pgr_createTopology
vending machine
HM升压IC芯片代理商
scala 高级
或命名“狙击手” 长安全新皮卡申报图
fiddler双向认证
阿里云慢下来了?
OpenHarmony如何选择图片在Image组件上显示(eTS)
Qt中的窗口单例不要用饿汉式