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 保存数组到Cookie的代码
Apr 14 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 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
CodeIgniter中实现泛域名解析
2014/07/19 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
JS获取整个页面文档的实现代码
2011/12/15 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
为Python程序添加图形化界面的教程
2015/04/29 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
飞利浦美国官网:Philips美国
2020/02/28 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
两道JAVA笔试题
2016/09/14 面试题
争论的故事教学反思
2014/02/06 职场文书
小学安全汇报材料
2014/08/14 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
党支部工作总结2015
2015/04/01 职场文书
2015年财政所工作总结
2015/04/25 职场文书
公司回复函格式
2015/07/14 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL