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禁止小键盘输入数字功能代码
Aug 01 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
jquery实现submit提交表单
Feb 03 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
vue之nextTick全面解析
May 17 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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制作简单的内容采集器的原理分析
2008/10/01 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
深入PHP变量存储的详解
2013/06/13 PHP
深入理解PHP内核(一)
2015/11/10 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
jquery 选择器部分整理
2009/10/28 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
英国手机零售商:Metrofone
2019/03/18 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
合作经营协议书
2014/04/17 职场文书
群教班子对照检查材料
2014/08/26 职场文书
简历自我评价优缺点
2015/03/11 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server