vue 引入高效率时间控件jquery.datetimepicker.full.js 踩坑记

应用背景:

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

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




二、使用

模板


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

   



 

   $('#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组件 输入日期时间,必须按照给定的格式输入,降低了操作效率

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

    

    

 

你可能感兴趣的:(vue,datetimepicker,jquery)