daterangepicker與vue集成，vue無法獲得日期控件時間的修改解決方法
- 2019 年 10 月 4 日
- 筆記
版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/wo541075754/article/details/100674691
在後端管理項目中使用vue來進行前端項目的開發，但我們都知道Vue實際上無法監聽由第三方插件所引起的數據變化。也無法獲得JQuery這樣的js框架對元素值的修改的。而日期控件daterangepicker又基於JQuery來實現的。
因此，在實踐中會出現在日期控件中點擊修改了日期，而無法通過vue來獲得對應的值。
下面來說一下其中一種解決方案：主動觸發Event事件。以下為相關內容的部分代碼。
首先引入日期控件daterangepicker相關依賴的js和css。
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
當然，上面還需要引入jQuery相關的框架。
在頁面的指定位置添加日期控件的input。
<input id="openDate" type="text" name="openDate" class="form-control" autocomplete="off" placeholder="選擇日期" v-model="openDate"/>
這裡痛v-model與vue中的openDate想綁定，但在後面js中不做特殊處理，是無法通過vue拿到該字段的值的。
js中初始化日期控件及觸發DOM對象上的原生input事件。
// 日期控件 $(function () { $('#openDate').daterangepicker({ showWeekNumbers: false, timePicker: false, timePickerIncrement: 1, singleDatePicker: true, startDate: moment(), maxDate: moment(), locale: { // cancelLabel: '清空' format: "YYYY-MM-DD", //設置顯示格式 applyLabel: '確定', //確定按鈕文本 cancelLabel: '取消', //取消按鈕文本 customRangeLabel: '自定義', daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay: 1 } }).on("hide.daterangepicker",function (ev) { //觸發DOM對象上的原生input事件 this.dispatchEvent(new Event('input')) }); });
需要特別注意的就是最後on方法中對hide.daterangepicker事件進行處理，在處理的方法中手動觸發時間。
而至於該input的openDate屬性在vue中的相關代碼如下：
var vm = new Vue({ //.... data: { //.... openDate:"", //.... }, //... });
至此，日期控件可正確相應，並且vue也能夠拿到日期控件中值的變化。
