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 相关文章推荐
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
javascript中递归的两种写法
Jan 17 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
原生js实现轮播图特效
May 04 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定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
PHP运行模式汇总
2016/11/06 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Python比较两个图片相似度的方法
2015/03/13 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Python缓存技术实现过程详解
2019/09/25 Python
海淘母婴商城:国际妈咪
2016/07/23 全球购物
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
教师实习自我鉴定
2013/12/13 职场文书
奥巴马演讲稿
2014/01/08 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
行政管理专业求职信
2014/07/06 职场文书
代领毕业证委托书
2014/08/02 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
2014离婚协议书范文
2014/09/10 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
综治维稳工作汇报
2014/10/27 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
生产设备维护保养制度
2015/08/06 职场文书
nginx搭建NFS网络文件系统
2022/04/14 Servers