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实现页面打印的三种方法
Mar 05 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
javascript 实现 原路返回
Jan 21 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 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
一些星际专用术语解释
2020/03/04 星际争霸
php UTF8 文件的签名问题
2009/10/30 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
浅谈Python中的数据类型
2015/05/05 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
python字典一键多值实例代码分享
2019/06/14 Python
基于python图像处理API的使用示例
2020/04/03 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
Viking比利时:购买办公用品
2019/10/30 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
婚礼新郎父母答谢词
2014/01/16 职场文书
高中军训感言600字
2014/03/11 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
课程设计的心得体会
2014/09/03 职场文书
营业员岗位职责范本
2015/04/14 职场文书
门球健将观后感
2015/06/16 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android