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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
在node中如何使用 ES6
Apr 22 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
js如何验证密码强度
Mar 18 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 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
zf框架db类的分页示例分享
2014/03/14 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
利用JS制作万年历的方法
2017/08/16 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
js制作提示框插件
2020/12/24 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
python 连续不等式语法糖实例
2020/04/15 Python
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
教师作风整改措施思想汇报
2014/10/12 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
博物馆观后感
2015/06/05 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL