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操作文本框readOnly
May 15 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
基于form-data请求格式详解
Oct 29 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
微信公众号网页分享功能开发的示例代码
May 27 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 daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
德国购买健身器材:AsVIVA
2017/08/09 全球购物
解释下面关于J2EE的名词
2013/11/15 面试题
机械工程师的岗位职责
2013/11/17 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
校长创先争优承诺书
2014/08/30 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
流动人口婚育证明
2014/10/19 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
学者《孟子》名人名言
2019/08/09 职场文书