vue中怎么在span中调整与控件的距离_EasyUI日期控件

EasyUI时前端一个框架，可能现在使用的不是很多了，大部分都用的是其他现在流行的前端框架，比如VUE;目前还有部分系统正在使用Easyui，在使用easyui时有些控件使用不是很全比如日期控件。

easyui已经提供了日期控件，但是只能选择年月日，官方网站并未提供可以按年选择或按年月选择的功能，我在网上也是搜了零零散散的信息也没有见完整介绍的，可能现在使用eayui框架不多的缘故。

下面介绍EasyUI日期控件更多功能。

一、按年选择

/** * 日期控件按年或按年月选择 * @param dateId 字段名 * @param timeInterval 默认按月，"year"按年选择 */function dateParser(dateId, timeIchunterval){  $('#'+dateId).datebox({     //显示日期选择对象后再触发弹出月份层的事件，因为初始化时没有生成月份层     onShowPanel: function () {      //触发click事件弹出月份层      span.trigger('click');      if (!tds)      //延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔      setTimeout(function() {        tds = p.find('div.calendar-menu-month-inner td');        tds.click(function(e) {           //禁止冒泡执行easyui给月份绑定的事件           e.stopPropagation();           //得到年份           let year = /\d{4}/.exec(span.html())[0] ,           //得到月份,之前是这样的month = parseInt($(this).attr('abbr'), 10) + 1;          month = parseInt($(this).attr('abbr'), 10);           //隐藏的日期对象输入框设置日期值          if (timeInterval=='year'){            $('#'+dateId).datebox('hidePanel').datebox('setValue', year);          }else{            $('#'+dateId).datebox('hidePanel').datebox('setValue', year + '-' + month);          }        });      }, 0);     },    //配置parser，返回选择的日期    parser: function (s) {      if (!s) return new Date();      if (timeInterval=='year'&&s.length==4){        s = s+"-"+(new Date().getMonth() + 1)      }      let arr = s.split('-');      return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);    },    //配置formatter，只返回年月 之前是这样的d.getFullYear() + '-' +(d.getMonth());    formatter: function (d) {      const currentMonth = (d.getMonth() + 1);      const currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');      if (timeInterval=='year'){        return d.getFullYear() ;      }else{        return d.getFullYear() + '-' + currentMonthStr;      }    }  });  //日期选择对象  let p = $('#'+dateId).datebox('panel'),  //日期选择对象中月份  tds = false,  //显示月份层的触发控件  span = p.find('span.calendar-text');  //设置前当月  let curr_time = new Date();  //获取年份  const curr_year = curr_time.getFullYear();  //获取月份  const curr_month = curr_time.getMonth() + 1;  $("#"+dateId).datebox("setValue", (curr_year + '-' + curr_month));}/** * 日期控件-按年选择 * 在"日"里面选择的效果 * @param dateId 字段名 */function dateParseToYear(dateId) {  $('#'+dateId).datebox({    parser: function (s) {//配置parser，返回选择的日期      if (!s) return new Date();      return new Date(s, 2, 1);    },    formatter: function (d) {//配置formatter，只返回年      return d.getFullYear();    }  });  const p = $("#" + dateId).datebox('panel'), //日期选择对象  tds = false, //日期选择对象中月份  span = p.find('span.calendar-text'); //显示月份层的触发控件  //设置当前年  $("#"+dateId).datebox("setValue", new Date().getFullYear());}

上面有两个函数，dateParser函数可按年选择也可以按年月选择，主要是看timeIchunterval参数传的值，参数伟‘year’即为按年选择，这个函数控件时在年月面板上操作的，调用方式为将上面的代码引入公共js文件中引用也可以直接写在自己的js文件中，通过调用dateParser('payDateEnd');函数即可，如果按年选择则dateParser('payDateEnd','year');也可dateParseToYear('payDateEnd'),dateParseToYear函数是在年月日面板上进行选择，后面会看到效果图。

下面图是在jsp页面直接引用公共js:

效果如下图，两种效果一种是年月日控件上选择年(左)，另一种是在在年月控件上选择年(右)。

二、按年月选择

按月选择其实上面的dateParser函数就是，默认是按年月选择。效果如下：