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

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



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



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



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

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，但是這兩個我們之前加載過了，這里就不用另外加載了。

第三個是文字插件，默認的是法語，可以在相應(yīng)的文件夾換成中文的。我們要把這三個文件放到我們的文件夾里，放哪里隨便，只要你找得到，但還是建議放在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被我轉(zhuǎn)移到了對應(yīng)的上，而v-on:input="saveSettime"則被我去掉了。

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

對應(yīng)的，下面