Elementui日期选择器,datarange设置多个禁用日期
写在前面:我真是服了JavaScript
我们在使用elementui的日期选择器时,常常需要请求后端的数据,然后根据后端的回传来确定多个禁用的日期,实现类似于下图的效果:
后端传输过来的数据为类似“2022-01-01”这样的字符串,需要先使用new Date("2022-01-01")转化为日期对象
具体代码如下:
-
<el-date-picker
-
v-model="info.date"
-
type="daterange"
-
start-placeholder="开始日期"
-
end-placeholder="结束日期"
-
value-format="yyyy-MM-dd"
-
:picker-options="pickerOptions"
-
:disabled="datepickerDisable">
-
</el-date-picker>
-
export default {
-
data() {
-
var _this=this
-
return {
-
pickerOptions: {
-
disabledDate(date) {
-
date.setHours(8)
-
if (date < Date.now() - 8.64e7 || date > Date.now() 13*8.64e7) {
-
return true
-
}
-
// 这里不能用foreach
-
for (let i=0;i<_this.disabledDates.length;i ) {
-
if (date.getTime() === _this.disabledDates[i].getTime()) {
-
console.log(date,_this.disabledDates[i].getTime())
-
return true
-
}
-
}
-
return false
-
}
-
}
-
}
-
},
踩过的坑:
1.在 disabledDate 中this是一个undefined,因此需要用 var _this=this 将this提前保存起来
2.在javascript中,foreach是一个同步函数(搞不懂为什么这样设计),因此不能使用foreach对日期进行判断,需要使用for循环(因为这个我找了两小时的博客)
3.disabledDate 中传入的date的时间为8:00,而new Date()出来的日期对象为0:00,因此需要设置一下时间 date.setHours(8)
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggjgki
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13