应用背景：

手动输入时间无需输入时间分隔符，提高操作效率

一、 在index.html引入依赖文件

<link rel="stylesheet" href="/static/jquery.datetimepicker.min.css">
<script src="/static/jquery.min.js"></script>
<script src="/static/jquery-mousewheel.js"></script>
<script src="/static/jquery.datetimepicker.full.min.js"></script>

二、使用

模板

<template>

<input type="text"

   class="form-control img_back pull-right icon-rili"

   placeholder="请选择回溯时间"

   id="commonTime"

   v-model="time" />

</template>

---

script

methods中定义方法

// 时间控件

changeTime () {

 // 时间控件

   let that = this;

  // 防止eslint报错

  /* eslint-disable */

$('#commonTime').keypress(function (event, $input) {

    var keycode = (event.keyCode ? event.keyCode : event.which);

    if (keycode == 13) {

        that.onSelectTime($(this).val());

        $(this).blur();

   }

}).datetimepicker({

     datepicker: true,

     timepicker: true,

     format: 'Y-m-d H:i:s',

     mask: '9999-19-39 29:59:59',

     step: 1,

     maxDate: new Date(),

     maxTime: new Date(),

     onShow: function () { },

     onSelectDate: function (c) {

         var maxTime = false;

          var nowDate = new Date();

          var cDate = c.getFullYear() + '-' + c.getMonth() + '-' + c.getDate();

           var nDate = nowDate.getFullYear() + '-' + nowDate.getMonth() + '-' + nowDate.getDate();

          if (cDate == nDate) {

               maxTime = nowDate;

          }

        this.setOptions({

            maxTime: maxTime

        });

    },

   onSelectTime: function (current_time, $input) {

         that.onSelectTime($input.val());

   }

});

---

mounted中调用

此处有坑注意，需使用延时加载

setTimeout(() => {

       this.changeTime();

}, 100);

组件封装完成后，在需要使用的地方引入

下面说一下遇到的问题

1. 同一个页面中引入两次会造成一个时间控件不能弹出

    解决方法：传入进行区分的值，在绑定的时候渲染不同的组件 $('#commonTime').keypress

    例如： $('.' + type === 1 ? 'componentA' : 'componentB').keypress。。。

2. 两次使用引入的组件，会造成快捷键不能使用，ctrl + a  ctrl + c 等等

    造成这个问题的原因是，组件引入有顺序，后加载的组件会覆盖之前加载的组件

    解决方法

    同时绑定两个input

   

<input type="text" class="form-control img_back pull-right icon-rili timeInput" 
      placeholder="请选择回溯时间" id="recallInput"

      @click="selectType(1)" v-model="fullSwiper.time" />

 <input type="text" class="form-control img_back pull-right icon-rili timeInput" 
          placeholder="请选择回溯时间"

          id="featInput"  @click="selectType(2)" v-model="featSwiper.time" />

   $('#featInput, #recallInput').keypress(function (event, $input)

  同样的在mounted里面 延时加载 ，如果不延时时间控件不能弹出

     setTimeout(() => {

        this.changeTime();

      }, 100);

3. 说一下，为什么要用jquery.datetimepicker.full.js这个时间插件，而且vue不提倡操作DOM

   使用过这个插件的同学会发现，配置了mask属性后 （mask: '9999-19-39 29:59:59'）, 在input框输入时间的时候，会自动格式化成设定的时间，而不需要按照给定的格式输入

 例如 2018-12-25 20:00:00 在20后面插入光标，输入2 ，光标会直接跳过： 变成 2018-12-25 20:20:00

  而 使用element-ui 中的datetimepicker组件 输入日期时间，必须按照给定的格式输入，降低了操作效率

  目前能够满足这个功能的组件库暂时还没有发现