element ui 时间控件多个日期

时间 2019-12-18

标签 element 时间控件多个日期繁體版

原文原文链接

前言：工做中用到 vue+element ui 的前端框架，须要使用时间控件来选择多个日期，已月日的形式，且有默认值，因此记录一下。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9408107.htmljavascript

网站地址：个人我的vue+element ui demo网站 css

github地址：yuleGH githubhtml

代码以下 前端

<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，在有默认值的状况下，第一次打开页面，点击时间控件，控件是不会选中的，以下图：vue

解决方法：java

　　控件的默认值放在mounted里赋值，并执行如下时间控件的showPicker和hidePicker方法，代码以下：
git

        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.htmlgithub

element ui 时间控件 多个日期

发现一个bug

element ui 时间控件多个日期