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压缩工具:X2JSCompactor
Jun 13 Javascript
js精度溢出解决方案
Dec 02 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
javascript清空table表格的方法
May 14 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
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获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
几个Shell Script面试题
2012/08/31 面试题
团日活动总结
2014/04/28 职场文书
大学生就业自荐书
2014/06/16 职场文书
农业项目建议书
2014/08/25 职场文书
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis