用Vue搭建一个应用盒子(二):datetime-picker
接着上次的进度,我们已经实现了一个todo-list。它已经具备了基本的功能,可以新建、编辑、删除任务。但是美中不足的是,它的时间设定上只能通过输入一段字符串来设定,很不社会。我们应该完成的效果是一个time-picker,日期选择器。
本来打算自己造轮子,无奈公司最近一段时间项目赶得紧,加上生活上遇到了一点挫折,直到7月初才有空闲下来想想代码,造轮子时间可能不够,也只能利用别人的现成插件了。google了几个vue的时间选择器插件,不是代码修改量太大就是看不太懂,要不就是UI和我的整体风格不符。于是另选思路,找到了现在的这个bootstrap的插件,代码量不大,也在自己可以理解的范围。于是开工。
不过中间还是有一些曲折,尝试几次还是没办法实现数据的双向绑定。我曾经试过想要把时间的数据换成键值对的形式,结果引发了诡异的bug,故作罢,最后还是使用了字符串,使用这个bootstrap插件,也有一部分的原因是因为这个的输出结果也是字符串,代码的修改量会很少。
好了,废话说了一箩筐,看代码吧。
github地址:地址
相关资源
首先需要下载插件:http://www.bootcss.com/p/boot...
度娘即可,sb都能找到。
解压打开,我们打开sample的V3版本。用编辑器打开index.html,先找到需要配置的文件,可以看到是下面这几个:
- bootstrap-datetimepicker.min.css
- bootstrap-datetimepicker.js
- bootstrap-datetimepicker.fr.js
本来在需要的插件里还有JQ、bootstrap,但是这两个我们之前加载过了,这里就不用另外加载了。
第三个是文字插件,默认的是法语,可以在相应的文件夹换成中文的。我们要把这三个文件放到我们的文件夹里,放哪里随便,只要你找得到,但还是建议放在src文件夹里。
代码内容
放好了之后,就需要导入了。和导入bootstrap一样,只要在main.js里注册即可,代码如下:
import './bootstrap-datetimepicker/bootstrap-datetimepicker.min.css'
import './bootstrap-datetimepicker/bootstrap-datetimepicker.min.js'
import './bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js'
接着,打开编辑器组件editor.vue
,我们首先要去掉时间输入的<input>
。接着修改为:
<div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"><input class="form-control settime-input" type="text" v-bind:value="setTime"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>
删掉的<input>
,为了保留双向绑定的功能,v-bind:value="setTime
被我转移到了对应的<input>
上,而v-on:input="saveSettime"
则被我去掉了。
为什么呢?因为这个方法是为了在<input>
输入值时获取并保存对应的值,而当我们用这个插件时,是没办法触发这个v-on:input
事件的,需要另外设置事件。具体的设置下面会说,这里替换掉就可以了。
对应的,下面<script>
的内容也需要替换。
saveSettime(e)
自然去掉,那么这个触发事件放到哪里去呢?答案是:放在事件选择器这个框消失的时候。
在methods
里添加代码如下:
dateDefind(){var self=this;$('.form_date').datetimepicker({language: 'zh-CN',format:'yyyy-mm-dd',weekStart: 1,todayBtn: 1,autoclose: 1,todayHighlight: 1,startView: 2,minView: 2,forceParse: 0}),$('.form_date').datetimepicker().on('hide',function(e){self.settimeInput=$('.settime-input').val();})}
可以看到上面的代码前一部分是插件的一些配置信息,可以设置语言、日期格式等等......
第二部分则是我在前面说的事件触发,会在日期选择框消失的时候触发一个赋值事件,赋值的内容和上面的v-on:input
一样。当然这里我会在最开始的时候var self=this
,这是闭包的知识,如果直接用this的话,是没办法取到正确的值的。
好了,到这一步,还不能实现这个插件。
我们还需要添加一个mounted
方法,因为dateDefind()
并没有被执行,所以我们需要添加如下代码:
mounted:function(){this.dateDefind();
}
好了,这里事件选择插件就能顺利使用了。那么这个todolist的基本功能就全部实现了。我的叙述可能有些不清楚的地方,所以需要你看看我的github,上面有我的源码,对照着写一遍吧。
最后还要感谢下面这篇文章给我的启发,欢迎大家点进去查看原文。
vue2.0 与 bootstrap datetimepicker的结合使用实例
用Vue搭建一个应用盒子(二):datetime-picker相关推荐
- 从零开始用 Flask 搭建一个网站(二)
从零开始用 Flask 搭建一个网站(一) 介绍了如何搭建 Python 环境,以及 Flask 应用基本项目结构.我们要搭建的网站是管理第三方集成的控制台,类似于 Slack. 本篇主要讲解数据如何 ...
- vue移动端日历组件 mintUi dateTime picker 设定开始和结束日期
vue移动端日历组件 mintUi dateTime picker 设定开始和结束日期
- 从零开始学习使用VUE搭建一个管理系统页面
因为我项目中需要使用VUE,因此我接触到了VUE这个前端框架.我分享下学习VUE的流程. 一.安装vue-cli: npm install -g @vue/cli # OR yarn global a ...
- Vue 搭建一个前端项目
一.前言 之前图省事,都是在html中引入Vue.js的CDN来使用Vue开发网站项目,其实正确的做法应该是使用Vue构建一个完整的项目,进而进行前后端分离的开发. 二.让我们开始吧! 1 node环 ...
- 用Vue搭建一个网易云播放器(一)
之前看了一个博主用vue搭建的网易云播放器,于是有了想法.最近没有什么项目,看书也看得无聊了,确确实实想来写点代码,那么就开始吧. 1.音乐资源 首先调研了一下一些开放的音乐API:豆瓣音乐.QQ音乐 ...
- 利用闲置的树莓派4B搭建一个NAS(二)
瞎折腾系列之利用闲置的树莓派搭建一个NAS,本文介绍安装好OpenMediaVault后进行基础配置,成功搭建NAS使用,后续关于OMV的配置和使用,以及如何最简单的进行内网穿透请关注后续博文! 利用 ...
- 用Vue搭建一个大屏数据可视化页面实战一(Vue实战系列)
一.从网上找一个喜欢的图 1.首先大屏要先解决屏幕适配的问题:这里用viewport的方案,使用postcss-px-to-viewport插件,在vue项目里新建postcss.config.js配 ...
- Django+vue搭建一个前后端分离的web 一
项目用到的技术: Vue.bootstrap.Django.python: 前后端分离项目的搭建和目录结构介绍: 创建Django项目: jango-admin startproject 项目名称 目 ...
- php模拟微信公众号服务器,GitHub - Lin07ux/wechat-third-server: 使用 ThinkPHP、Vue 搭建一个带有后台的微信公众号第三方服务器的基础模板...
微信公众号第三方服务器 该项目用于实现一个最基本的微信公众号第三方服务器开发的模板. 基于: ThinkPHP v3.2.3 Vue v2.2.0 Vue-resource v1.0.3 功能 微信用 ...
最新文章
- 成功解决AttributeError: module ‘tensorflow‘ has no attribute ‘get_variable‘
- Spark _30_SparkStreaming算子操作Driver HA
- linux 关机 日志,centos7 异常关机了,怎么查看系统的异常日志?
- php 安装rabtmq amqp 扩展
- java opc 读取到数据块的数据_MES系统功能数据传输的介绍
- 数据传输服务 DTS > 数据迁移 > 从自建数据库迁移至阿里云 > 源库为MySQL > 从自建MySQL迁移至RDS MySQL
- ASP.NET MVC 3.0学习系列文章(开始学习MVC)
- 2017年杭州java面试题_2017年Java面试题整理
- MariaDB 在 RedHat Linux 上的安装过程以及 MySQL 相关命令的使用
- stm32矩阵键盘学习笔记
- 百度地图logo去掉
- js+css实现瀑布流
- safari浏览网页打开速度很慢如何解决
- 高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed解决方案
- Python写入数据到txt文本中
- python_17(sql)
- const 定义数组问题
- Nibabel 读取 nii 文件和 nii.gz 文件
- 24小时轮播怎么实现的_优酷24小时轮播台如何使用
- GDM, KDM, LightDM, SDDM的区别和安装配置