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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php设计模式小结
2013/02/15 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
批量修改标签css样式以input标签为例
2014/07/31 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
Python 功能和特点(新手必学)
2015/12/30 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python文件操作基本流程代码实例
2017/12/11 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
如何教少儿学习Python编程
2020/07/10 Python
python反扒机制的5种解决方法
2021/02/06 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
银行办理业务介绍信
2014/01/18 职场文书
会议邀请书范文
2014/02/02 职场文书
入团介绍人意见范文
2015/06/04 职场文书