接著上次的進度，我們已經實現了一個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的結合使用實例