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();
          });
        }