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。

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

# vue2  # datetimepicker  # vue  # vuejs  # Vue实现腾讯云点播视频上传功能的实现代码  # vue如何在项目中调用腾讯云的滑动验证码  # vue结合el-upload实现腾讯云视频上传功能  # Vue中img的src属性绑定与static文件夹实例  # Vue上传组件vue Simple Uploader的用法示例  # Vue.js 动态为img的src赋值方法  # 关于vue v-for循环解决img标签的src动态绑定问题  # vue中使用腾讯云Im的示例  # 是在  # 选择器  # 我在  # 也就  # 看我  # 跳转  # 会再  # 绑定  # 大家多多  # 不起作用  # title  # input  # form  # model  # select  # box  # control  # jquery  # messageSendTime  # script 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何实现邮件验证激活账户_Laravel内置MustVerifyEmail接口配置【步骤】  如何在建站主机中优化服务器配置？  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  如何用PHP快速搭建CMS系统？  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样？  简单实现Android文件上传  Python文件操作最佳实践_稳定性说明【指导】  Linux系统运维自动化项目教程_Ansible批量管理实战  Laravel如何实现多级无限分类_Laravel递归模型关联与树状数据输出【方法】  教你用AI润色文章，让你的文字表达更专业  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置  JavaScript Ajax实现异步通信  Laravel如何记录自定义日志？（Log频道配置）  如何在Windows 2008云服务器安全搭建网站？  香港服务器网站卡顿？如何解决网络延迟与负载问题？  Mybatis 中的insertOrUpdate操作  Laravel Eloquent访问器与修改器是什么_Laravel Accessors & Mutators数据处理技巧  如何注册花生壳免费域名并搭建个人网站？  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  Laravel Seeder怎么填充数据_Laravel数据库填充器的使用方法与技巧  Python制作简易注册登录系统  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  如何用AWS免费套餐快速搭建高效网站？  Laravel怎么连接多个数据库_Laravel多数据库连接配置  如何快速重置建站主机并恢复默认配置？  Laravel如何部署到服务器_线上部署Laravel项目的完整流程与步骤  Linux后台任务运行方法_nohup与&使用技巧【技巧】  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  Laravel如何使用Facades（门面）及其工作原理_Laravel门面模式与底层机制  谷歌浏览器下载文件时中断怎么办 Google Chrome下载管理修复  如何在搬瓦工VPS快速搭建网站？  详解Oracle修改字段类型方法总结  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】  html5如何实现懒加载图片_ intersectionobserver api用法【教程】  实例解析Array和String方法  实现点击下箭头变上箭头来回切换的两种方法【推荐】  Android中Textview和图片同行显示(文字超出用省略号，图片自动靠右边)  如何快速搭建高效可靠的建站解决方案？  EditPlus 正则表达式 实战(3)  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  Windows家庭版如何开启组策略(gpedit.msc)？（安装方法）  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  微信小程序 input输入框控件详解及实例（多种示例）  怎么用AI帮你为初创公司进行市场定位分析？  网站制作企业,网站的banner和导航栏是指什么？  如何快速建站并高效导出源代码？