前言：工作中用到 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 时间控件 多个日期的更多相关文章

  1. jquery-ui日期时间控件实现

    日期控件和时间控件为独立控件,日期时间控件要同一时候导入日期控件和时间控件的js,然后在日期控件加入时间控件显示參数,没有导入时间控件js.日期控件函数设置的时间控件參将包错 日期控件官网网址:htt ...

  2. jquery日期时间控件

    代码下载地址:  jquery日期时间控件下载地址 .  工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件    <!DOCTYPE HTML PUBLIC "- ...

  3. 学习日期时间控件 daterangepicker

    aterangepicker 是一款日期时间控件,可选择“年,月,日,时,分,秒”,可选择单面板,也可选择双面板(起止时间). 单面板示例:daterangepicker 单面板 codepen 在线 ...

  4. VB6.0中，DTPicker日期、时间控件不允许为空时，采用文本框与日期、时间控件相互替换赋值（解决方案）

    VB6.0中,日期.时间控件不允许为空时,采用文本框与日期.时间控件相互替换赋值,或许是一个不错的选择. 实现效果如下图: 文本框txtStopTime1 时间框DTStopTime1(DTPicke ...

  5. jquery 时间控件怎么能禁止输入只能选择日期？

    jsp一个input输入框用的是easyui时间控件,现在问题是如何是这个input只能点击选择日期,而禁止手动输入 解决方法::: 在日期的input标签里面添加::::editable=" ...

  6. 令人头痛的ExtJS日期时间控件

    1 缘由 Ext提供了日期.时间的控件,但没有将日期和时间组合在一起的控件.在网上搜索时,有前辈创建或重写了时间相关的类,并提供了源码.不得不说那位作者对 extjs 框架理解得很透彻,虽然不知道他当 ...

  7. 日期与时间控件QDate, QTime, QDateTime

    QDate类用于处理公历日期.QTime类用于处理时间.QDateTime类将QDate对象和QTime对象整合为一个对象 QDate: from PyQt5.QtCore import QDate, ...

  8. DatePicker日期与时间控件

    DatePicker日期与时间控件 一.简介 二.方法 最日常的使用方法了 日期控件DatePicker 时间控件TimePicker 月份从0开始 三.代码实例 效果图: 代码: fry.Activ ...

  9. delphi中DateTimePicker控件同时输入日期和时间

    将DateTimePicker的Format属性中加入日期格式设成 'yyyy-MM-dd HH:mm',注意大小写 , 将kind设置为dtkTime即可,可以在每次Form onShow时将Dat ...

随机推荐

  1. TDDL与Spring Boot集成Version报错——跟踪与解决

    先说背景:公司采用diamond+tddl,这套技术来做web管理.本人处于好奇率先体验了下spring-boot,于是就有了spring-boot+tddl的组合.但是jar包上线后,屡屡发现一条e ...

  2. poj2506 Tiling

    http://poj.org/problem?id=2506 题目大意:用多少种方法可以用2*1或2*2瓦片来铺一个2*n的矩形? 这是一个2*17长方形的样品. 输入是一行行的序列,每一行包含一个整 ...

  3. vue-router进阶笔记

    导航守卫 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航,大白话,检测路由跳转过程中的具体的变化. 一.全局前置守卫——router.beforeEach 使用router. ...

  4. django -admin 源码解析

    admin源码解析 单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单 ...

  5. Python封装

    什么是封装 在程序设计中,封装(Encapsulation)是对具体对象的一种抽象,即将某些部分隐藏起来,在程序外部看不到,其 含义是其他程序无法调用. 要了解封装,离不开“私有化”,就是将类或者是函 ...

  6. 自己搞了20万张图片100个分类，tensorflow训练23万次后。。。。。。

    自己搞了20万张图片100个分类,tensorflow训练23万次后...... 我自己把训练用的一张图片,弄乱之后做了一个预测 100个汉字,20多万张图片,tensorflow CNN训练23万次 ...

  7. 细说Activity与Task（任务栈）

    Task概要: task是一个具有栈结构的容器,可以放置多个Activity实例.启动一个应用,系统就会为之创建一个task,来放置根Activity:默认情况下, 一个Activity启动另一个Ac ...

  8. Spring Boot的listener简单使用

    监听器(Listener)的注册方法和 Servlet 一样,有两种方式:代码注册或者注解注册 1.代码注册方式 通过代码方式注入过滤器 @Bean     public ServletListene ...

  9. addEventListener和attachEvent的区别 分类： JavaScript 2015-05-12 19:03 702人阅读 评论(0) 收藏

    addEventListener共有3个参数,如下所示:element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事 ...

  10. windows下安装并使用redis

    一.安装前首先了解一下phpinfo里面的一些信息,能否正确安装非常有帮助. (下图是我的本机环境) compiler :编译器 Architecture :CPU架构 Configuration F ...