用Vue搭建一个应用盒子（二）：datetime-picker

时间 2019-11-09

标签 vue 搭建一个应用盒子 datetime picker 栏目 CSS 繁體版

原文原文链接

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

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

不过中间仍是有一些曲折，尝试几回仍是没办法实现数据的双向绑定。我曾经试过想要把时间的数据换成键值对的形式，结果引起了诡异的bug，故做罢，最后仍是使用了字符串，使用这个bootstrap插件，也有一部分的缘由是由于这个的输出结果也是字符串，代码的修改量会不多。

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

github地址：地址css

代码内容

放好了以后，就须要导入了。和导入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>。接着修改成：app

<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事件的，须要另外设置事件。具体的设置下面会说，这里替换掉就能够了。ide

对应的，下面<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

相关资源

代码内容