element 日期选择图标_element-ui 限制日期选择的方法(datepicker)

这篇文章主要为大家详细介绍了element-ui 限制日期选择的方法(datepicker)，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！

Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是 Mint UI 。

需求场景如下：

指定起止日期，后选的将会受到先选的限制

不同的日期选择器，不过也存在关联关系

实现方法不难，利用了 change 事件，动态改变 picker-options 中的 disableDate 即可。

查看Demo

Template

代码如下：

起始日期

截止日期

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;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持512笔记。

注：关于element-ui 限制日期选择的方法(datepicker)的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：vue.js

element 日期选择图标_element-ui 限制日期选择的方法(datepicker)相关推荐

vant显示日期格式_Vue+Vant ui实现日期时间选择
Vue+Vant ui实现日期时间选择 1.安装Vant ui npm i vant -S 2.在 main.js 中引入 Vant ui // 引入vant import Vant from 'va ...
element table批量删除_element ui 批量删除
//这里做一个事件 checkbox发生改变时触发修改删除 data{ return { multipleSelection: [] //返回的是选中的列的数组集合这里接收用户选中的id 默认放 ...
elementui下拉框选择图片_element ui下拉框如何实现默认选择?
为什么我这样写没反应呢运营商级别 <el-option v-for="item in options1" :label="item.label" :va ...
elementui下拉框选择图片_Element UI系列：Select下拉框实现默认选择
[编程题目]一个整数数组,长度为 n,将其分为 m 份,使各份的和相等,求 m 的最大值★★ (自己没有做出来!!) 45.雅虎(运算.矩阵): 2.一个整数数组,长度为 n,将其分为 m 份,使各份 ...
element 日期选择图标_element-ui日期组件DatePicker设置日期选择范围Picker Options
element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...
关于Element UI中日期时间选择器在IE浏览器中初始化显示的兼容性问题
一.简单说明项目使用Vue+Element UI进行开发,使用了 DateTimePicker 日期时间选择器. 二.问题描述打开修改对话框(进行选择日期操作可以正常显示),在谷歌浏览器中初始化时 ...
【Element UI】日期选择器el-date-picker 默认选中当前日期==＞不可选当日之前的日期
一个人能否合理表达自己的攻击性是健康与否的重要标准. 参考Element UI Element - The world's most popular Vue UI framework 目录 1.默认 ...
使用element ui 的日期插件搜索清空时报错
1.先贴上一张图,供您看一看 Error in v-on handler: "TypeError: Cannot read property '0' of null" 我这报错报了 ...
Elemrnt UI DatePicker日期选择器（格式、限定日期），周选择器
Elemrnt UI DatePicker日期选择器(格式.限定日期),周选择器日期选择器(格式) <el-date-pickertype="date"// 绑定值的格式v ...

element 日期选择图标_element-ui 限制日期选择的方法(datepicker)

element 日期选择图标_element-ui 限制日期选择的方法(datepicker)相关推荐

最新文章

热门文章