用Vue搭建一個應用盒子（二）：datetime-picker

接着上次的進度，咱們已經實現了一個todo-list。它已經具有了基本的功能，能夠新建、編輯、刪除任務。可是美中不足的是，它的時間設定上只能經過輸入一段字符串來設定，很不社會。咱們應該完成的效果是一個time-picker，日期選擇器。



原本打算本身造輪子，無奈公司最近一段時間項目趕得緊，加上生活上遇到了一點挫折，直到7月初纔有空閒下來想一想代碼，造輪子時間可能不夠，也只能利用別人的現成插件了。google了幾個vue的時間選擇器插件，不是代碼修改量太大就是看不太懂，要不就是UI和個人總體風格不符。因而另選思路，找到了如今的這個bootstrap的插件，代碼量不大，也在本身能夠理解的範圍。因而開工。



不過中間仍是有一些曲折，嘗試幾回仍是沒辦法實現數據的雙向綁定。我曾經試過想要把時間的數據換成鍵值對的形式，結果引起了詭異的bug，故做罷，最後仍是使用了字符串，使用這個bootstrap插件，也有一部分的緣由是由於這個的輸出結果也是字符串，代碼的修改量會不多。



好了，廢話說了一籮筐，看代碼吧。

github地址：地址

相關資源

首先須要下載插件：http://www.bootcss.com/p/boot...

度娘便可，sb都能找到。

解壓打開，咱們打開sample的V3版本。用編輯器打開index.html，先找到須要配置的文件，能夠看到是下面這幾個：

1. bootstrap-datetimepicker.min.css
2. bootstrap-datetimepicker.js
3. bootstrap-datetimepicker.fr.js

原本在須要的插件裏還有JQ、bootstrap，可是這兩個咱們以前加載過了，這裏就不用另外加載了。

第三個是文字插件，默認的是法語，能夠在相應的文件夾換成中文的。咱們要把這三個文件放到咱們的文件夾裏，放哪裏隨便，只要你找獲得，但仍是建議放在src文件夾裏。

代碼內容

放好了以後，就須要導入了。和導入bootstrap同樣，只要在main.js裏註冊便可，代碼以下：

import './bootstrap-datetimepicker/bootstrap-datetimepicker.min.css'
import './bootstrap-datetimepicker/bootstrap-datetimepicker.min.js'
import './bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js'

接着，打開編輯器組件editor.vue，咱們首先要去掉時間輸入的<input>。接着修改成：

<div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
            <input class="form-control settime-input" type="text" v-bind:value="setTime">
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
         </div>

刪掉的<input>，爲了保留雙向綁定的功能，v-bind:value="setTime被我轉移到了對應的<input>上，而v-on:input="saveSettime"則被我去掉了。

爲何呢？由於這個方法是爲了在<input>輸入值時獲取並保存對應的值，而當咱們用這個插件時，是沒辦法觸發這個v-on：input事件的，須要另外設置事件。具體的設置下面會說，這裏替換掉就能夠了。

對應的，下面<script>的內容也須要替換。

saveSettime(e)天然去掉，那麼這個觸發事件放到哪裏去呢？答案是：放在事件選擇器這個框消失的時候。

在methods裏添加代碼以下：

dateDefind(){
        var self=this;
        $('.form_date').datetimepicker({
          language:  'zh-CN',
          format:'yyyy-mm-dd',
          weekStart: 1,
          todayBtn:  1,
              autoclose: 1,
              todayHighlight: 1,
              startView: 2,
              minView: 2,
              forceParse: 0
        }),
        $('.form_date').datetimepicker()
        .on('hide',function(e){
          self.settimeInput=$('.settime-input').val();
        })
      }

能夠看到上面的代碼前一部分是插件的一些配置信息，能夠設置語言、日期格式等等......

第二部分則是我在前面說的事件觸發，會在日期選擇框消失的時候觸發一個賦值事件，賦值的內容和上面的v-on：input同樣。固然這裏我會在最開始的時候var self=this，這是閉包的知識，若是直接用this的話，是沒辦法取到正確的值的。

好了，到這一步，還不能實現這個插件。

咱們還須要添加一個mounted方法，由於dateDefind()並無被執行，因此咱們須要添加以下代碼：

mounted:function(){
  this.dateDefind();
}

好了，這裏事件選擇插件就能順利使用了。那麼這個todolist的基本功能就所有實現了。個人敘述可能有些不清楚的地方，因此須要你看看個人github，上面有個人源碼，對照着寫一遍吧。

最後還要感謝下面這篇文章給個人啓發，歡迎你們點進去查看原文。

vue2.0 與 bootstrap datetimepicker的結合使用實例