vue2.0 与 bootstrap datetimepicker的结合使用

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。

vue2.0 与 bootstrap datetimepicker的结合使用相关推荐

vue2.0桌面端框架_Vue PC端框架
Vue PC端框架 472019.02.22 10:30:20字数 1,749阅读 54,067 1. Element Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面 ...
vue2.0 element学习
1,bootstrap和vue2.0结合使用 vue文件搭建好后,引入jquery和bootstrap 我采用的方式为外部引用在main.js内部直接导入用vue-cli直接安装jquery和bo ...
基于vue2.0的一个豆瓣电影App
1.搭建项目框架使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...
vue2.0分页插件官方_Vue 2的最佳和完整分页插件
vue2.0分页插件官方 vuejs-uib分页 (vuejs-uib-pagination) Best and complete pagination plugin for Vue.js. Insp ...
vue2.0桌面端框架_vue 专题 vue2.0各大前端移动端ui框架组件展示
element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 ...
bootstrap datetimepicker 用法+demo案例下载
bootstrap datetimepicker 用法+demo案例下载官网文档地址是:http://www.bootcss.com/p/bootstrap-datetimepicker/ date ...
vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建多个轻量库搭配使用请访问链接: https://ww ...
bootstrap datetimepicker的时间变成1899年
bootstrap datetimepicker 重新加载后,日期会变1899年, 这个问题要怎么解决呢?? 先看个小例子: <%@ Page Language="C#" A ...
尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P001-050]
视频链接:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili P1-50:当前页面. P51-100:尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + ...

vue2.0 与 bootstrap datetimepicker的结合使用

vue2.0 与 bootstrap datetimepicker的结合使用

vue2.0 与 bootstrap datetimepicker的结合使用相关推荐

最新文章

热门文章