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

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



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



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



好了，廢話說(shuō)了一籮筐，看代碼吧。

github地址：地址

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

度娘即可，sb都能找到。

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

bootstrap-datetimepicker.min.css

bootstrap-datetimepicker.js

bootstrap-datetimepicker.fr.js

本來(lái)在需要的插件里還有JQ、bootstrap，但是這兩個(gè)我們之前加載過(guò)了，這里就不用另外加載了。

第三個(gè)是文字插件，默認(rèn)的是法語(yǔ)，可以在相應(yīng)的文件夾換成中文的。我們要把這三個(gè)文件放到我們的文件夾里，放哪里隨便，只要你找得到，但還是建議放在src文件夾里。

放好了之后，就需要導(dǎo)入了。和導(dǎo)入bootstrap一樣，只要在main.js里注冊(cè)即可，代碼如下：

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

接著，打開編輯器組件editor.vue，我們首先要去掉時(shí)間輸入的。接著修改為：

刪掉的，為了保留雙向綁定的功能，v-bind:value="setTime被我轉(zhuǎn)移到了對(duì)應(yīng)的上，而v-on:input="saveSettime"則被我去掉了。

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

對(duì)應(yīng)的，下面