接着上次的进度,我们已经实现了一个todo-list。它已经具备了基本的功能,可以新建、编辑、删除任务。但是美中不足的是,它的时间设定上只能通过输入一段字符串来设定,很不社会。我们应该完成的效果是一个time-picker,日期选择器。


本来打算自己造轮子,无奈公司最近一段时间项目赶得紧,加上生活上遇到了一点挫折,直到7月初才有空闲下来想想代码,造轮子时间可能不够,也只能利用别人的现成插件了。google了几个vue的时间选择器插件,不是代码修改量太大就是看不太懂,要不就是UI和我的整体风格不符。于是另选思路,找到了现在的这个bootstrap的插件,代码量不大,也在自己可以理解的范围。于是开工。


不过中间还是有一些曲折,尝试几次还是没办法实现数据的双向绑定。我曾经试过想要把时间的数据换成键值对的形式,结果引发了诡异的bug,故作罢,最后还是使用了字符串,使用这个bootstrap插件,也有一部分的原因是因为这个的输出结果也是字符串,代码的修改量会很少。


好了,废话说了一箩筐,看代码吧。

github地址:地址

相关资源

首先需要下载插件:http://www.bootcss.com/p/bootstrap-datetimepicker/

度娘即可,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的结合使用实例

Logo

前往低代码交流专区

更多推荐