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入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
JavaScript中对象介绍
Dec 31 Javascript
JavaScript模拟push
Mar 06 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
vue axios整合使用全攻略
May 24 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
javascript数组includes、reduce的基本使用
Jul 02 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 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
取得父标签
2006/11/14 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python3搜索及替换文件中文本的方法
2015/05/22 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python如何使用unittest测试接口
2018/04/04 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
python连接mongodb集群方法详解
2020/02/13 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
护士长竞聘演讲稿
2014/04/30 职场文书
保护环境倡议书100字
2014/05/19 职场文书
体育口号大全
2014/06/18 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
instantclient客户端 连接oracle数据库
2022/04/26 Oracle