element ui 时间控件 多个日期
前言:工作中用到 vue+element ui 的前端框架,需要使用时间控件来选择多个日期,已月日的形式,且有默认值,所以记录一下。转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9408107.html
网站地址:我的个人vue+element ui demo网站
github地址:yuleGH github
代码如下
<html> <head>
<title>多日期选择</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="../lib/elementui/theme-chalk/index.css" type="text/css">
</head>
<body>
<div id="app">
<p style="color: red;">时间控件年月,有默认值,设置时间控件不可输入</p>
<span>月</span>
<el-date-picker
v-model="monthValue"
type="month"
:editable = "false"
placeholder="选择月">
</el-date-picker> <p style="color: red;">时间控件选择多个日期,有默认值,设置时间控件不可输入</p>
<p></p>
<span class="demonstration">多个日期</span>
<el-date-picker
ref="datesRef"
type="dates"
v-model="dateArr"
:editable = "false"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择一个或多个日期">
</el-date-picker> <el-button type="primary" @click="clickBtn" class="btn">打印选择的时间</el-button> <div style="margin-top: 20px">
<span>打印区</span>
<el-input type="textarea" v-model="printStr"></el-input>
</div>
</div>
<!-- 引入组件库 -->
<script type="text/javascript" src="../lib/vue.js"></script>
<script type="text/javascript" src="../lib/elementui/index.js"></script> <script type="text/javascript">
new Vue({
el: "#app",
data: {
monthValue : "2018-06",
dateArr: [],
printStr: ""
},
methods: {
clickBtn: function () {
this.printStr = this.dateArr ? this.dateArr.join() : "";
}
},
mounted: function(){
//为了解决bug,所以默认值放在了这里
this.$nextTick(function(){
this.dateArr = ["2018-08-03","2018-08-06"];
this.$refs.datesRef.showPicker();
this.$refs.datesRef.hidePicker();
});
}
});
</script> </body> </html>
发现一个bug
发现一个bug,在有默认值的情况下,第一次打开页面,点击时间控件,控件是不会选中的,如下图:
解决方法:
控件的默认值放在mounted里赋值,并执行以下时间控件的showPicker和hidePicker方法,代码如下:
mounted: function(){
//为了解决bug,所以默认值放在了这里
this.$nextTick(function(){
this.dateArr = ["2018-08-03","2018-08-06"];
this.$refs.datesRef.showPicker();
this.$refs.datesRef.hidePicker();
});
}
转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9408107.html
element ui 时间控件 多个日期的更多相关文章
- jquery-ui日期时间控件实现
日期控件和时间控件为独立控件,日期时间控件要同一时候导入日期控件和时间控件的js,然后在日期控件加入时间控件显示參数,没有导入时间控件js.日期控件函数设置的时间控件參将包错 日期控件官网网址:htt ...
- jquery日期时间控件
代码下载地址: jquery日期时间控件下载地址 . 工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件 <!DOCTYPE HTML PUBLIC "- ...
- 学习日期时间控件 daterangepicker
aterangepicker 是一款日期时间控件,可选择“年,月,日,时,分,秒”,可选择单面板,也可选择双面板(起止时间). 单面板示例:daterangepicker 单面板 codepen 在线 ...
- VB6.0中,DTPicker日期、时间控件不允许为空时,采用文本框与日期、时间控件相互替换赋值(解决方案)
VB6.0中,日期.时间控件不允许为空时,采用文本框与日期.时间控件相互替换赋值,或许是一个不错的选择. 实现效果如下图: 文本框txtStopTime1 时间框DTStopTime1(DTPicke ...
- jquery 时间控件怎么能禁止输入只能选择日期?
jsp一个input输入框用的是easyui时间控件,现在问题是如何是这个input只能点击选择日期,而禁止手动输入 解决方法::: 在日期的input标签里面添加::::editable=" ...
- 令人头痛的ExtJS日期时间控件
1 缘由 Ext提供了日期.时间的控件,但没有将日期和时间组合在一起的控件.在网上搜索时,有前辈创建或重写了时间相关的类,并提供了源码.不得不说那位作者对 extjs 框架理解得很透彻,虽然不知道他当 ...
- 日期与时间控件QDate, QTime, QDateTime
QDate类用于处理公历日期.QTime类用于处理时间.QDateTime类将QDate对象和QTime对象整合为一个对象 QDate: from PyQt5.QtCore import QDate, ...
- DatePicker日期与时间控件
DatePicker日期与时间控件 一.简介 二.方法 最日常的使用方法了 日期控件DatePicker 时间控件TimePicker 月份从0开始 三.代码实例 效果图: 代码: fry.Activ ...
- delphi中DateTimePicker控件同时输入日期和时间
将DateTimePicker的Format属性中加入日期格式设成 'yyyy-MM-dd HH:mm',注意大小写 , 将kind设置为dtkTime即可,可以在每次Form onShow时将Dat ...
随机推荐
- python 匿名函数 lambda 的使用
在python中,lambda允许用户快速定义单行函数,当然用户也可以按照典型的函数定义完成函数.lambda的目的就是简化用户定义使用函数的过程. In [6]: s = lambda x: x+1 ...
- Kafka文件存储机制
一.topic中partition存储分布 在本地的kafka中,我们只启动一个broker,创建两个topic:single-todo和single-todo-vip ,每个topic有两个part ...
- Java并发工具类之CountDownLatch
CountDownLatch允许一个或则多个线程等待其他线程完成操作. 假如我们有这样的需求:我们需要解析一个excel文件中的多个sheet,我们可以考虑使用多线程,每一个线程解析excel中的一个 ...
- webpack快速入门——配置文件:入口和出口,多入口、多出口配置
1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...
- Pyplot绘图的格式
字符 颜色 ‘b’ 蓝色,blue ‘g’ 绿色,green ‘r’ 红色,red ‘c’ 青色,cyan ‘m’ 品红,magenta ‘y’ 黄色,yellow ‘k’ 黑色,black ‘w’ ...
- 在 iOS 上编译 webkit 源码
准备工作 买一台 mac 下载并安装 Xcode 下载源码 git clone git://git.webkit.org/WebKit.git WebKit 这个可能要耗费很久很久 编译源码 打开 X ...
- Python小白学习之路(四)——第一次练习题
写在前面: 今天下雪了呢!连着两天都没有更新学习记录. 我没有偷懒呢.做了一天的练习题,昨天学的内容还没总结完,太累了就回去睡觉了 连续一周早起,强大的内心也无法支撑我疲惫的身体 今天早起做了整理.加 ...
- Builder生成器(创建型模式)
一.使用场景: 1.假设要创建一个House设施,该设施的创建由若干个部分组成,而且这若干个部分经常变化. 如果用最直观的设计方式,每一个房屋部分的变化,都将导致整个房屋结构的重新修正,但是这种设计方 ...
- 【Java并发编程】:加锁和volatile变量
加锁和volatile变量两者之间的区别: 1.volatile变量是一种稍弱的同步机制在访问volatile变量时不会执行加锁操作,因此也就不会使执行线程阻塞,因此volatile变量是一种比syn ...
- Types方法之upperBound-lowerBound-isUnbounded-containsType
1.upperBound(Type t)方法 /** * The "rvalue conversion". * The upper bound of most types is t ...