vue2.0 與 bootstrap datetimepicker的結(jié)合使用實例
1.在很多的項目中,我們都會用到日期插件,然后當我在vue中使用bootstrap datetimepicker時發(fā)現(xiàn)雙向綁定不起作用了,bootstrap datetimepicker修改的日期不會同步到data中,下面看我的解決方案:
<template>
<div id="time">
<span class="select-box-title">選擇發(fā)送時間:</span>
<input class="form-control select-box-input" v-model="time" type="text"
id="messageSendTime">
</div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
name: 'time',
data () {
return {
time: ''
}
},
methods: {
dateDefind () {
var d, s;
var self = this;
d = new Date();
s = d.getFullYear() + "-"; //取年份
s = s + (d.getMonth() + 1) + "-";//取月份
s += d.getDate() + " "; //取日期
s += d.getHours() + ":"; //取小時
s += d.getMinutes() + ":"; //取分
s += d.getSeconds(); //取秒
self.time = s;
//初始化
$('#messageSendTime').datetimepicker({
startDate: s,
minView: "hour", //選擇日期后,不會再跳轉(zhuǎn)去選擇時分秒
language: 'zh-CN',
format: 'yyyy-mm-dd hh:ii:ss',
todayBtn: 1,
autoclose: 1
});
//當選擇器隱藏時,講選擇框只賦值給data里面的time
$('#messageSendTime').datetimepicker()
.on('hide', function (ev) {
var value = $("#messageSendTime").val();
self.time = value;
});
}
},
mounted: function () {
this.dateDefind();
}
}
</script>
<style scoped>
</style>
總結(jié):其實也就是在datetimepicker的設(shè)置里面添加一個事件,當選擇器hide時,講選擇框的值賦值給data里面的time。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue-virtual-scroll-list虛擬組件實現(xiàn)思路詳解
這篇文章主要給大家介紹了關(guān)于vue-virtual-scroll-list虛擬組件實現(xiàn)思路的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-02-02
Vue雙向數(shù)據(jù)綁定與響應(yīng)式原理深入探究
本節(jié)介紹雙向數(shù)據(jù)綁定以及響應(yīng)式的原理,回答了雙向數(shù)據(jù)綁定和數(shù)據(jù)響應(yīng)式是否相同,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧2022-08-08
vue環(huán)境如何實現(xiàn)div?focus?blur焦點事件
這篇文章主要介紹了vue環(huán)境如何實現(xiàn)div?focus?blur焦點事件,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08

