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 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
element中Steps步骤条和Tabs标签页关联的解决
Dec 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&amp;&amp;mysql)六
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
vue实现记事本功能
2019/06/26 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python去除字符串两端空格的方法
2015/05/21 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
浅谈django channels 路由误导
2020/05/28 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
类的核心特性有哪些
2014/01/01 面试题
世界经理人咨询有限公司面试
2014/09/23 面试题
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
采购部部长岗位职责
2014/02/06 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2014年减负工作总结
2014/12/10 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书