我遇到这样一个场景,需要动态渲染时间表单,但是后端传过来的数据,
这个时候就不能预先找到想要限制的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. 『无为则无心』Python函数 — 39、Python中异常的传播

    目录 1.异常的传播 2.如何处理异常 1.异常的传播 当在函数中出现异常时,如果在函数中对异常进行了处理,则异常不会再继续传播.如果函数中没有对异常进行处理,则异常会继续向函数调用者传播.如果函数调 ...

  2. python函数关键字实参传参

    #!/usr/bin/python #coding=utf-8 #好好学习,天天向上 def describe_pet(type,name): print(f"i have a {type} ...

  3. Mac iterm2 配色以及终端大小写敏感解决方案

    iterm2是mac下非常好用的一款终端.但默认的配色实在不好用,经过一翻搜索终于找到了比较满意的,以下贴出博主的解决方案 配色 首先修改 ~/.bash_profile 加入一下代码 #enable ...

  4. PyTorch 介绍 | BUILD THE NEURAL NETWORK

    神经网络由对数据进行操作的layers/modules组成.torch.nn 命名空间提供了所有你需要的构建块,用于构建你自己的神经网络.PyTorch的每一个module都继承自nn.Module. ...

  5. CF1581

    其实是手速场,但因为 \(\rm D, E\) 数据范围时限太阴间卡住了. D \(\rm Hint:\) 本题常数极小加适当剪枝可以 \(\mathcal{O}(n ^ 5)\) 过 \(100\) ...

  6. 实现“手机qq”侧滑菜单 -- 吴欧

    基本数据采集 经过体验,手机QQ采用的应该是线性动画,即视图缩放比例等随手指在屏幕上滑动的距离以一次方程的形式变化. 提取基本数据,向右侧滑达到最大幅度时: 1.   右侧主视图左边界距离屏幕左边界的 ...

  7. Tomcat服务部署及优化

    Tomcat 服务部署及优化 1.Tomcat简介 2.Tomcat 服务安装及部署 3.Tomcat虚拟主机配置 4.Tomcat 优化 1.Tomcat简介: 概述: Tomcat是Java语言开 ...

  8. LNMP平台的redis对接安装

    LNMP平台的redis对接安装 目录 LNMP平台的redis对接安装 一.安装LNMP的各个组件 二.安装redis服务 三.安装redis扩展 四.修改php配置文件 五.测试连接 一.安装LN ...

  9. 帆软报表(finereport)禁用右键

    点击模板>模板web属性>(填报,数据分析,分页预览设置),选择为该模板单独设置,在下面的事件设置里面添加一个加载结束事件,完整js代码如下: 这段代码的基本原理是让用户的页面右键点击事件 ...

  10. P2678 [NOIP2015 提高组] 跳石头

    #include<bits/stdc++.h> using namespace std; int l,n,m,a[100010];//与起点的距离 bool check(int d) { ...