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

2024年1月7日 187次阅读 来源: WE2008311

接着上次的进度，我们已完成了一个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的连系运用实例

    原文作者：WE2008311
    原文地址: https://segmentfault.com/a/1190000013057605
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞