摘要：接著上次的進度，我們已經實現了一個。我們應該完成的效果是一個，日期選擇器。好了，到這一步，還不能實現這個插件。我們還需要添加一個方法，因為并沒有被執行，所以我們需要添加如下代碼好了，這里事件選擇插件就能順利使用了。與的結合使用實例

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



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



不過中間還是有一些曲折，嘗試幾次還是沒辦法實現數據的雙向綁定。我曾經試過想要把時間的數據換成鍵值對的形式，結果引發了詭異的bug，故作罷，最后還是使用了字符串，使用這個bootstrap插件，也有一部分的原因是因為這個的輸出結果也是字符串，代碼的修改量會很少。



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

github地址：地址

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

度娘即可，sb都能找到。

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

bootstrap-datetimepicker.min.css

bootstrap-datetimepicker.js

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，我們首先要去掉時間輸入的。接著修改為：

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

為什么呢？因為這個方法是為了在輸入值時獲取并保存對應的值，而當我們用這個插件時，是沒辦法觸發這個v-on：input事件的，需要另外設置事件。具體的設置下面會說，這里替換掉就可以了。

對應的，下面