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


Posted in Javascript onMay 22, 2017

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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Array的push与unshift方法性能比较分析
Mar 05 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 Javascript
Vue实现动态显示textarea剩余字数
May 22 #Javascript
bootstrap栅格系统示例代码分享
May 22 #Javascript
vue+axios实现登录拦截的实例代码
May 22 #Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 #Javascript
bootstrap模态框远程示例代码分享
May 22 #Javascript
bootstrap手风琴折叠示例代码分享
May 22 #Javascript
移动端手指放大缩小插件与js源码
May 22 #Javascript
You might like
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
python远程登录代码
2008/04/29 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python 重命名轴索引的方法
2018/11/10 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Python如何使用字符打印照片
2020/01/03 Python
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
金融专业个人的自我评价
2013/10/18 职场文书
毕业生自荐信
2013/12/14 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
进步之星获奖感言
2014/02/22 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
英语导游词
2015/02/13 职场文书
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB