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 getComputedStyle获取和设置style的原理
Oct 10 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
js字符串转成JSON
Nov 07 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
中止javascript执行的方法
2014/02/14 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
JavaScript实现滑块验证解锁
2021/01/07 Javascript
Python中的hypot()方法使用简介
2015/05/18 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
在双python下设置python3为默认的方法
2018/10/31 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
医院实习介绍信
2014/01/12 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
护校行动方案
2014/05/31 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
离职证明范本
2015/06/12 职场文书
教师节校长致辞
2015/07/31 职场文书
公司董事任命书
2015/09/21 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android