例:如一段已知的时间范围,为2018-10-01 - 2019-01-01 ;
当前为2018-07-09日,则今天以前的时间不能选择,以及2019-01-01以后的时间不能选;实现如下;

<el-form-item label="时间选择" prop="addTime">
 <el-date-picker
    :editable="false"
      unlink-panels
    v-model="form.addTime"
  type="daterange"
  value-format="yyyy-MM-dd"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :picker-options="pickerOptions"
  :default-value="defaultValue">
   </el-date-picker>
</el-form-item>

export default {
  data() {
  let tool = this.tool
  let _this = this
  return {
  form:{
    time:[], //为时间范围段
    addTime:[], //为最终选择的时间,组件绑定的时间
  },
  formRules:{
    addTime:[{ required: true,message: '时间不能为空!', trigger: 'blur' }],
  },
pickerOptions: {
  disabledDate (time) {
    let t = _this.tool.date.format(new Date(), "yyyy-MM-dd")
    t= t+' 00:00:00'
    let myDate = new Date(_this.form.time[0])
    let year = myDate.getFullYear()
    let month = myDate.getMonth()
    let date = myDate.getDate()
    if(_this.form.time[1]){
      if(new Date(year, month, date).getTime() < new Date(t).getTime()){
        return time.getTime() > new Date(_this.form.time[1]).getTime() || time.getTime() < new Date(t).getTime()
      }
      return time.getTime() > new Date(_this.form.time[1]).getTime() || time.getTime() < new Date(year, month, date).getTime()
    }else {
      if(new Date(year, month, date).getTime() < new Date(t).getTime()){
        return time.getTime() < new Date(t).getTime()
      }
      return time.getTime() < new Date(year, month, date).getTime()
    }
  }
},
  defaultValue:tool.date.format(new Date(),'yyyy-MM-dd'),
  }
 }
}

element-UI时间控件:日期时间的选择范围的控制方法的更多相关文章

  1. 自定义EasyUI的datetimebox控件日期时间的显示格式(转)

    工作中遇到的问题,在此记录一下. 需求:前台页面使用了EasyUI框架,在某一个html页面中要求datetimebox显示格式为年月日和小时,如图所示: 尝试过两种方法,分别如下: 第一种方法: d ...

  2. angular1时间控件之时间比较大小,比如入住日期和离店日期,入住不能晚于离店时间

    功能可能是大家有时遇到的,不过angluar1现在用的人很少了,希望帮上和我一样掉坑里的朋友吧,之前自己也在网上找过几乎没找到angluar1和我代码需求一样的控件,没办法自己造 了,看代码图 就差不 ...

  3. jquery-ui日期时间控件实现

    日期控件和时间控件为独立控件,日期时间控件要同一时候导入日期控件和时间控件的js,然后在日期控件加入时间控件显示參数,没有导入时间控件js.日期控件函数设置的时间控件參将包错 日期控件官网网址:htt ...

  4. UWP学习记录8-设计和UI之控件和模式5

    UWP学习记录8-设计和UI之控件和模式5 1.日历.日期和时间控件 日期和时间控件提供了标准的本地化方法,可供用户在应用中查看并设置日期和时间值. 有四个日期和时间控件可供选择,选择的依据如下: 日 ...

  5. element ui 时间控件 多个日期

    前言:工作中用到 vue+element ui 的前端框架,需要使用时间控件来选择多个日期,已月日的形式,且有默认值,所以记录一下.转载请注明出处:https://www.cnblogs.com/yu ...

  6. jquery日期时间控件

    代码下载地址:  jquery日期时间控件下载地址 .  工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件    <!DOCTYPE HTML PUBLIC "- ...

  7. 学习日期时间控件 daterangepicker

    aterangepicker 是一款日期时间控件,可选择“年,月,日,时,分,秒”,可选择单面板,也可选择双面板(起止时间). 单面板示例:daterangepicker 单面板 codepen 在线 ...

  8. VB6.0中,DTPicker日期、时间控件不允许为空时,采用文本框与日期、时间控件相互替换赋值(解决方案)

    VB6.0中,日期.时间控件不允许为空时,采用文本框与日期.时间控件相互替换赋值,或许是一个不错的选择. 实现效果如下图: 文本框txtStopTime1 时间框DTStopTime1(DTPicke ...

  9. jquery 时间控件怎么能禁止输入只能选择日期?

    jsp一个input输入框用的是easyui时间控件,现在问题是如何是这个input只能点击选择日期,而禁止手动输入 解决方法::: 在日期的input标签里面添加::::editable=" ...

  10. 令人头痛的ExtJS日期时间控件

    1 缘由 Ext提供了日期.时间的控件,但没有将日期和时间组合在一起的控件.在网上搜索时,有前辈创建或重写了时间相关的类,并提供了源码.不得不说那位作者对 extjs 框架理解得很透彻,虽然不知道他当 ...

随机推荐

  1. Django-5.1 模型层 单表操作

    7.1 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开 ...

  2. CAD安装失败怎样卸载CAD 2009?错误提示某些产品无法安装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  3. 性能测试工具LoadRunner11-LR之Virtual User Generator 移动app录制

    准备条件: 1.安装插件LR_03105_Patch4.EXE,安装完成之后就会有Mobile App(HTTP/HTML),如下截图所示 2.安装热点wifi,160wifi(注:有可能有的热点软件 ...

  4. webview的进度条的加载,webview的使用以及handle的理解与使用

    Webview的几个关键方法要介绍一些: 谷歌官方文档是这么说的; A WebView has several customization points where you can add your ...

  5. Murano Weekly Meeting 2015.09.22

    Meeting time: 2015.September.22th 1:00~2:00 Chairperson:  Serg Melikyan, PTL from Mirantis Meeting s ...

  6. Murano Weekly Meeting 2015.08.11

    Meeting time: 2015.August.11th 1:00~2:00 Chairperson:  Serg Melikyan, PTL from Mirantis Meeting summ ...

  7. LeetCode 122.买卖股票的最佳时机(C++)

    给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必须在再次 ...

  8. 13、Selenium+python+API分类总结

    Selenium+python+API分类总结 http://selenium-python.readthedocs.org/index.html 分类 方法 方法描述 客户端操作 __init__( ...

  9. Redis入门--(一)简介NoSQL

    1.什么是NoSql? 2.为什么需要NoSQL? 互联网经历了1.0和2.0的发展: web1.0 是早期新浪,雅虎等只能浏览,不能交互: 传统关系型数据库在应付web2.0这种动态网站的时候力不从 ...

  10. springmvc+spring+mybatis+sqlserver----查询sqlserver----有返回参数

    <resultMap type="java.util.HashMap" id="resultMap"> <result column=&quo ...