我遇到这样一个场景,需要动态渲染时间表单,但是后端传过来的数据,
这个时候就不能预先找到想要限制的date了,因为连date本身,也是根据后端传来的数据生成的。
如图:

代码如下:

//template部分
<el-date-picker
v-model="selectbeginTime"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
></el-date-picker> //script部分 data() {
return {
beginweekday: null,
endweekday: null,
selectbeginTime: '',
pickerOptions: {
disabledDate: this.disabledDate
}
}
},
methods: {  
  async getWeek() {
//从后台获取endweekday和beginweekday此处省略
  },
disabledDate(time) {
return (
time.getTime() > new Date(this.endweekday) ||
time.getTime() < new Date(this.beginweekday) - 8.64e7
);
}
}

费了挺大劲,最终代码也不多,终于完美完工!

elementUI日期选择器 el-date-picker根据所选日期选择禁用的更多相关文章

  1. ElementUI】日期选择器时间选择范围限制,只能选今天之前的时间,或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期

    <el-date-picker v-model="value1" type="date" placeholder="选择日期" :pi ...

  2. 后端日期类属性date 不接受string类型日期,都是没找到解决的方法,所有前端传回的string字符串都一一转化为java定义的类型

    1.比如日期 我们可以是yyyy-MM-dd 亦可以是 yyyy-MM-dd HH:mm:ss 方法1在java代码中需要的字段上加上注解 写上日期类型,不过这样很麻烦,每个人写了日期类型的接收前端的 ...

  3. uni-app中组件picker的基本使用(日期选择器为例)

    例:需要在下图"自定义日期"中使用日期选择器 <template> <div> <picker mode="date" @chan ...

  4. Flex 日期选择器控件

    在构建用户界面时,经常用到日期的输入和选择. 输入日期时,用户可以使用键盘输入,也可以在类似于日历的弹出式对话框中,通过鼠标单击所选日期. 在Flex中可以通过日期输入控件实现输入和选择日期.Flex ...

  5. (网页)jQuery UI 实例 - 日期选择器(Datepicker)

    默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面 ...

  6. Mobiscroll手机触屏日期选择器

       最近在制作jquery mobile因要用到日历控件,突然发现Mobiscroll非常不错.于是摘下来记录. A Mobiscroll是一个用于触摸设备(Android phones.iPhon ...

  7. element-ui DatePicker 日期选择器 让结束日期大于开始日期

    element-ui  DatePicker 日期选择器 <el-date-picker v-model="addForm.startDate" type="dat ...

  8. ElementUI 日期选择器 datepicker 选择范围限制

    在使用elementUI中日期选择器时,经常会遇到这样的需求——对可选择的时间范围有一定限制,比如我遇到的就是:只能选择今天以前的一年以内的日期. 查阅官方文档,我们发现它介绍的并不详细,下面我们就来 ...

  9. 【ElementUI】日期选择器时间选择范围限制

    ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 官方文档中使用picker-options属性来限制可选择的日期, ...

  10. 关于element-ui日期选择器disabledDate使用心得

    实现目的: 使用type="data"类型实现具备开始日期与结束日期组件(ps:element有自带的type="daterange"类型的组件可以实现此功能) ...

随机推荐

  1. find直接copy大于某一个时间小于某一个时间的文件

    find ./ -type f -newermt '2000-01-04 10:30:00' ! -newermt '2019-10-28 10:57:00' -exec cp -a {} /var/ ...

  2. Windows使用Nginx配置本地文件代理(查看本地资源或图片)

    一.前言 我们在实际开发中会经常遇到把图片上传到服务器上,比如七牛云.阿里云.腾讯云一些提供服务的商家.但是我们的图片隐私也会泄露,所以我们还是上传到本地,使用Nginx来代理到我们本地图片.这样就可 ...

  3. Redis 分布式锁使用不当,酿成一个重大事故,超卖了100瓶飞天茅台!!!(转)

    基于Redis使用分布式锁在当今已经不是什么新鲜事了. 本篇文章主要是基于我们实际项目中因为redis分布式锁造成的事故分析及解决方案.我们项目中的抢购订单采用的是分布式锁来解决的,有一次,运营做了一 ...

  4. NSMutableString练习

    从要求讲3个520it拼接在一起 会生成很多新的字符串 NSString *res = @""; NSString *subStr = @"520"; // 1 ...

  5. NSString基本概念

    1.NSString基本概念 什么是NSString? 一个NSString对象就代表一个字符串(文字内容) 一般称NSString为字符串类 2.NSString创建方式 最直接的方式(常量字符串) ...

  6. python基础1-类属性和实例属性

    类属性就是类对象所拥有的属性,它被所有类对象的实例对象所共有,在内存中只存在一个副本,这个和C++中类的静态成员变量有点类似.对于公有的类属性,在类外可以通过类对象和实例对象访问 类属性 class ...

  7. DbUnit入门实战

    原文地址: http://yangzb.iteye.com/blog/947292 相信做过单元测试的人都会对JUnit 非常的熟悉了, 今天要介绍的DbUnit(http://dbunit.sour ...

  8. Docker的数据管理、网络通信和dockerfile

    Docker的数据管理.网络通信和dockerfile 目录 Docker的数据管理.网络通信和dockerfile 一.Docker的数据管理 1. 数据卷 1.1 数据卷定义 1.2 数据卷配置 ...

  9. Flask初探之WSGI

    Flask是一个使用 Python 编写的轻量级 Web 应用框架.较其他同类型框架更为灵活.轻便.安全且容易上手.它可以很好地结合MVC模式进行开发,小型团队在短时间内就可以完成功能丰富的中小型网站 ...

  10. Solution -「Gym 102956F」Border Similarity Undertaking

    \(\mathcal{Description}\)   Link.   给定一张 \(n\times m\) 的表格,每个格子上写有一个小写字母.求其中长宽至少为 \(2\),且边界格子上字母相同的矩 ...