用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,先找到需要配置的文件,可以看到是下面这几个:

  1. bootstrap-datetimepicker.min.css
  2. bootstrap-datetimepicker.js
  3. 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的结合使用实例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/284299.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ArcGIS实验教程——实验四十八:ArcGIS制图表达入门及案例教程

文章目录 1. 制图表达的概念1.1 什么是地图表达1.2 使用制图表达改善要素外观1.3 制图表达的优点2. 使用制图表达2.1 创建制图表达2.2 使用制图表达来符号化图层2.3 使用制图表达规则3. 地图表达实战案例1.创建制图表达2.添加几何效果3.使用制图规则4.使用制图表达属性覆盖1. 制…

PAT (Advanced Level) 1070. Mooncake (25)

简单贪心。先买性价比高的。 #include<cstdio> #include<cstring> #include<cmath> #include<vector> #include<map> #include<stack> #include<queue> #include<string> #include<algorithm> using namespace std;doub…

[转]Java 18 还未用上,Java 19 最新两大特性曝光

铁打的 Java&#xff0c;流水的版本。 不久前&#xff0c;Java 18 才正式发布&#xff0c;遵循 Oracle 六个月发一版本的频率&#xff0c;Java 19 将在今年 9 月出炉。这不&#xff0c;还没等众多开发者用上 Java 18&#xff0c;关于 Java 19 最新的两个目标功能就被披露了出…

文本生成器(bzoj 1030)

Description JSOI交给队员ZYX一个任务&#xff0c;编制一个称之为“文本生成器”的电脑软件&#xff1a;该软件的使用者是一些低幼人群&#xff0c;他们现在使用的是GW文本生成器v6版。该软件可以随机生成一些文章―――总是生成一篇长度固定且完全随机的文章—— 也就是说&…

C# 值类型和引用类型讲解

要了解值类型和引用类型&#xff0c;我们首先要知道堆和栈的区别&#xff1a;① 栈是编译期间就分配好的内存空间&#xff0c;因此你的代码中必须就栈的大小有明确的定义&#xff1b;堆是程序运行期间动态分配的内存空间&#xff0c;你可以根据程序的运行情况确定要分配的堆内存…

【ArcGIS微课1000例】0048:制图表达(3)---水立方效果实现

本文讲解ArcGIS中水立方效果的实现过程(制图表达案例)。 文章目录 一、效果展示二、制作步骤1. 创建数据库及要素数据集2. 创建范围3. 创建随机点4. 创建泰森多边形5. 创建制图表达一、效果展示 基于制图表达的思想,可以容易实现多种形式的水立方效果,例如: 怎么实现的呢…

Java中this与super的区别

2019独角兽企业重金招聘Python工程师标准>>> this与super关键字在java中构造函数中的应用&#xff1a; ** super()函数 ** super()函数在子类构造函数中调用父类的构造函数时使用&#xff0c;而且必须要在构造函数的第一行&#xff0c;例如&#xff1a; class Ani…

EF选择Mysql数据源

EF添加ADO.NET实体模型处直接选择Mysql数据源 最近想到EF是连接多数据库的orm框架&#xff0c;于是就想测试下。查了一堆网上资料后&#xff0c;测试连接mysql成功。步骤如下&#xff1a; 1、在你项目Model层中nuget安装MySql.Data.Entity 如果没安装这个provider 就进行下面的…

JIRA简介及基本概念

目录 第一章 JIRA简介 1.1 什么是JIRA 1.2 JIRA的主要功能 1.3 JIRA的主要特点 1.3.1 JIRA的优点 1.3.2 JIRA的缺点 1.4 相关版本 第二章 JIRA的基本概念 2.1 JIRA 中涉及的角色 2.1.1 管理人员 2.1.2 项目管理者 2.1.3 开发人员 2.1.4 测试人员 2.2 问题 2.2.1…

CodeChef Chef and Churu [分块]

题意&#xff1a; 单点修改$a$ 询问$a$的区间和$f$的区间和 原来普通计算机是这道题改编的吧... 对$f$分块&#xff0c;预处理$c[i][j]$为块i中$a_j$出现几次&#xff0c;$O(NH(N))$&#xff0c;只要每个块差分加上然后扫一遍就行了不用树状数组之类的 修改&#xff0c;整块直接…

SkiaSharp 之 WPF 自绘 拖曳小球(案例版)

感谢各位大佬和粉丝的厚爱和关心( 催更)&#xff0c;我会再接再厉的&#xff0c;其实这也是督促自己的一种方式&#xff0c;非常感谢。刚写了一篇万字长文&#xff0c;自己也休养生息(低调发育)了一段时间&#xff0c;接下来来几个小案例。拖曳小球WPF的拖曳效果&#xff0c;基…

Nodejs Guides(四)

EVENTS events模块API实例 const EventEmitter require(events);class MyEmitter extends EventEmitter { } //EventListener 会按照监听器注册的顺序同步地调用所有监听器。 //所以需要确保事件的正确排序且避免竞争条件或逻辑错误。 //监听器函数可以使用 setImmediate() 或…

[转]常用自动化测试工具

1、Appium 官网&#xff1a;http://appium.io AppUI自动化测试 Appium 是一个移动端自动化测试开源工具&#xff0c;支持iOS 和Android 平台&#xff0c;支持Python、Java 等语言&#xff0c;即同一套Java 或Python 脚本可以同时运行在iOS 和Android平台&#xff0c;Appium 是…

ABP学习资源整理

不同的编程语言都有构建Web Application的框架&#xff0c;比如C#中的ASP.NET Core和ABP&#xff0c;Java中的Spring Boot和Spring Cloud&#xff0c;Python中的Django和Flask&#xff0c;Node.js中的Express和Koa2&#xff0c;Go中的Beego和Gin等。今天要介绍的主角是ABP框架&…

【ArcGIS微课1000例】0049:制图表达(4)---自由式制图表达

文章目录 一、转换为自由表达并编辑二、将效果转换为几何当编辑地图时,可能会遇到一个独特的或显著的特征,需要专门的符号的情况,可以使用覆盖的制图表达来实现,但是往往不够。可能需要简单地绘制一个图形以达到要求的外观,这时可以尝试使用自由式制图表达。 自由式制图表…

基于FPGA的异步FIFO设计

今天要介绍的异步FIFO&#xff0c;可以有不同的读写时钟&#xff0c;即不同的时钟域。由于异步FIFO没有外部地址端口&#xff0c;因此内部采用读写指针并顺序读写&#xff0c;即先写进FIFO的数据先读取&#xff08;简称先进先出&#xff09;。这里的读写指针是异步的&#xff0…

顾小清:教育信息化进入数字化转型重要时期

身处技术加快更新、新概念频出的时代&#xff0c;教育信息化的发展更需要坚守以人为本的初心&#xff0c;在热点炒作的杂音中保持理智&#xff0c;避免盲目&#xff0c;抓住符合教育规律、满足教育需求、安全有效的准绳&#xff0c;理性推进和落实。 技术在不断发展&#xff0c…

EJB

Enterprise JavaBean,企业级javabean,是J2EE的一部分&#xff0c;定义了一个用于 开发基于组件的企业多重应用程序的标准。其特点包括网络服务支持和核心开发工具(SDK)。 是Java的核心代码&#xff0c;分别是会话Bean&#xff08;Session Bean&#xff09;&#xff0c;实体Be…

java 连接redis 以及基本操作

一、首先下载安装redis 二、项目搭建 1.搭建一个maven 工程 2. 在pom.xml文件的dependencies节点下增加如下内容&#xff1a; <!-- resis --><dependency><groupId>org.redisson</groupId><artifactId>redisson</artifactId><version&…

WinForm(一):开始一个WinForm程序

WinForm程序只能运行在Windows上&#xff0c;即使是基于.NET5&#xff0c;6&#xff0c;7也一样。因为WinForm的UI层对接的底层API是基于Windows的。用VisualStudio创建一个WinForm应用很简单&#xff0c;建议使用非.NET Framework版&#xff0c;因为.NET Framework微软渐渐不支…