elementUI日期选择器 el-date-picker根据所选日期选择禁用
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根据所选日期选择禁用的更多相关文章
- ElementUI】日期选择器时间选择范围限制,只能选今天之前的时间,或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期
<el-date-picker v-model="value1" type="date" placeholder="选择日期" :pi ...
- 后端日期类属性date 不接受string类型日期,都是没找到解决的方法,所有前端传回的string字符串都一一转化为java定义的类型
1.比如日期 我们可以是yyyy-MM-dd 亦可以是 yyyy-MM-dd HH:mm:ss 方法1在java代码中需要的字段上加上注解 写上日期类型,不过这样很麻烦,每个人写了日期类型的接收前端的 ...
- uni-app中组件picker的基本使用(日期选择器为例)
例:需要在下图"自定义日期"中使用日期选择器 <template> <div> <picker mode="date" @chan ...
- Flex 日期选择器控件
在构建用户界面时,经常用到日期的输入和选择. 输入日期时,用户可以使用键盘输入,也可以在类似于日历的弹出式对话框中,通过鼠标单击所选日期. 在Flex中可以通过日期输入控件实现输入和选择日期.Flex ...
- (网页)jQuery UI 实例 - 日期选择器(Datepicker)
默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面 ...
- Mobiscroll手机触屏日期选择器
最近在制作jquery mobile因要用到日历控件,突然发现Mobiscroll非常不错.于是摘下来记录. A Mobiscroll是一个用于触摸设备(Android phones.iPhon ...
- element-ui DatePicker 日期选择器 让结束日期大于开始日期
element-ui DatePicker 日期选择器 <el-date-picker v-model="addForm.startDate" type="dat ...
- ElementUI 日期选择器 datepicker 选择范围限制
在使用elementUI中日期选择器时,经常会遇到这样的需求——对可选择的时间范围有一定限制,比如我遇到的就是:只能选择今天以前的一年以内的日期. 查阅官方文档,我们发现它介绍的并不详细,下面我们就来 ...
- 【ElementUI】日期选择器时间选择范围限制
ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 官方文档中使用picker-options属性来限制可选择的日期, ...
- 关于element-ui日期选择器disabledDate使用心得
实现目的: 使用type="data"类型实现具备开始日期与结束日期组件(ps:element有自带的type="daterange"类型的组件可以实现此功能) ...
随机推荐
- 绑定方法和隐藏属性之property装饰器
目录 一:绑定方法 1.绑定给对象的方法 2.绑定给类的方法 3.非绑定方法之静态方法 二,隐藏属性 1.如何隐藏属性 三,property 装饰器 一:绑定方法 1.绑定给对象的方法 class P ...
- linux解析映射文件与自动加载脚本
目录 一 :解析映射文件 1.解析文件的由来之主机名: 2.解析映射文件(DNS) 二:磁盘挂载文件 三:开机自动加载脚本 一 :解析映射文件 1.解析文件的由来之主机名: 无论是在局域网还是在INT ...
- 源码安装 python3.7
yum install libffi-devel openssl -y wget https://www.python.org/ftp/python/3.7.4/Python-3.7.4.tgz ta ...
- 学习JAVAWEB第十八天
今天解决了登录过程中的数据库连接池的一些问题,如本地服务器不能被访问,主要是连接池的配置文件的问题 明天做一个htm页面,不同用户的不同html页面
- pycharm 安装插件
1.使用pip安装插件 pip安装指定版本的插件: pip install openpyxl==2.6.2 -i https://pypi.doubanio.com/simple/ -i后面跟的是&q ...
- python 小兵(4)之文件操作 小问题
1.光标不对就用seek 2.文件操作方面注意不要变修改变删除,会爆出文件正在运行不能操作 3.w模式下只有开始打开的时候会清空 4.文件操作的时候用as 后面的参数进行操作,不能用文件名进行操作 5 ...
- Linux 安装和 连接xshell
一.介绍和安装 /*一.linux:? 为什么要学习它. 常见的操作系统? 1.windows, linux,mac 使用命令行进行操作 Windows cmd Linux 和Mac 中的命令行是 s ...
- deque概述
1.简介 双端队列deque,与vector的最大差异在于: 一.deque运行常数时间对头端或尾端进行元素的插入和删除操作. 二.deque没有所谓的容器概念,因为它是动态地以分段连续空间组合而成随 ...
- CheckStyle使用手册(一)
介绍 CheckStyle是SourceForge下的一个项目,提供了一个帮助JAVA开发人员遵守某些编码规范的工具.它能够自动化代码规范检查过程,从 而使得开发人员从这项重要,但是枯燥的任务中解脱出 ...
- 区区牛马蹉跎 ,不要向生活低下头 Linux的账号和管理
账户和管理权限 1.管理用户账号和组账号 2.管理目录和文件的属性 1.Linux基于用户身份对资源访问进行控制:用户账号(超级用户.普通用户.程序用户) 组账号(基本组.附加组).UID (用户标识 ...