element-ui 限制日期选择的方法(datepicker)


Posted in Javascript onMay 16, 2018

Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI 。

需求场景如下:

  1. 指定起止日期,后选的将会受到先选的限制
  2. 不同的日期选择器,不过也存在关联关系

实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDate 即可。

查看Demo

Template

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.3.8/lib/index.js"></script>
<div id="app">
<template>
 <div class="block">
  <span class="demonstration">起始日期</span>
  <el-date-picker v-model="startDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsStart" @change="changeEnd">
  </el-date-picker>
 </div>
 
 <div class="block">
  <span class="demonstration">截止日期</span>
  <el-date-picker v-model="endDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsEnd" @change="changeStart">
  </el-date-picker>
 </div>
</template>
</div>

Script

var Main = {
  data() {
   return {
    pickerOptionsStart: {},
    pickerOptionsEnd:{},
    startDate: '',
    endDate: '',
   };
  },
  methods:{
   changeStart (){
    this.pickerOptionsStart = Object.assign({},this.pickerOptionsStart,{
     disabledDate: (time) => {
      return time.getTime() > this.endDate
     }
    })
   },
   changeEnd (){
    this.pickerOptionsEnd = Object.assign({},this.pickerOptionsEnd,{
     disabledDate: (time) => {
      return time.getTime() < this.startDate
      }
    })
   }
  }
 };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

Style

@import url("//unpkg.com/element-ui@2.3.8/lib/theme-chalk/index.css");

.block{
 margin-top:10px;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
详解js前端代码异常监控
Jan 11 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 #Javascript
详解使用create-react-app快速构建React开发环境
May 16 #Javascript
seajs下require书写约定实例分析
May 16 #Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 #Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 #Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 #Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 #Javascript
You might like
PHP 防注入函数(格式化数据)
2011/08/08 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
jqgrid 简单学习笔记
2011/05/03 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
Python判断变量是否已经定义的方法
2014/08/18 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
python如何实现代码检查
2019/06/28 Python
安装PyInstaller失败问题解决
2019/12/14 Python
python如何导入依赖包
2020/07/13 Python
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
物业保安员岗位职责制度
2014/01/30 职场文书
新员工入职感言
2014/02/01 职场文书
机电系毕业生求职信
2014/07/11 职场文书
个人工作表现评价材料
2014/09/21 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL