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 相关文章推荐
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
原生js开发的日历插件
Feb 04 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
原生js实现自定义滚动条组件
Jan 20 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
十天学会php之第四天
2006/10/09 PHP
PHP4.04简明安装
2006/10/09 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
javascript中floor使用方法总结
2019/02/02 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Django中的Model操作表的实现
2018/07/24 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
员工自我鉴定
2013/10/09 职场文书
组工干部演讲稿
2014/09/02 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
员工聘用合同范本
2015/09/21 职场文书
计算机实训心得体会
2016/01/14 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
python自动化调用百度api解决验证码
2021/04/13 Python
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python