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中圖片轉(zhuǎn)base64格式實現(xiàn)方法
這篇文章主要介紹了vue中圖片轉(zhuǎn)base64格式實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue.js+Echarts開發(fā)圖表放大縮小功能實例
本篇文章主要介紹了vue.js+Echarts開發(fā)圖表放大縮小功能實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06
完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題
這篇文章主要介紹了完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10

