vue2.0 与 bootstrap datetimepicker的结合使用实例

1.在很多的项目中，我们都会用到日期插件，然后当我在vue中使用bootstrapdatetimepicker时发现

1.在很多的项目中，我们都会用到日期插件，然后当我在vue中使用bootstrap datetimepicker时发现双向绑定不起作用了，bootstrap datetimepicker修改的日期不会同步到data中，下面看我的解决方案：

<template>
 <div id="time">
 <span class="select-box-title">选择发送时间：</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", //选择日期后，不会再跳转去选择时分秒
 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>

总结：其实也就是在datetimepicker的设置里面添加一个事件，当选择器hide时，讲选择框的值赋值给data里面的time。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。