日期时间增加UK

44 阅读2分钟

因业务需要,对时间增加UK(未知)操作,具体如下:

image.png

image.png

年月日时分都可以选择UK,组件是在前端组已有组件上改造的,原有组件不支持定制开始时间、结束时间。

UI组件库用的是ant design

循环以下数组得到页面固有列,根据配置显示 eg:yyyy-mm-dd 只显示年月日

[
    { name: '年', visible: 0, options: this.buildYearArray(), value: undefined },
    { name: '月', visible: 0, options: this.buildArrayForHMS(12, 1), value: undefined },
    { name: '日', visible: 0, options: this.buildArrayForHMS(31, 1), value: undefined },
    { name: '时', visible: 0, options: this.buildArrayForHMS(24), value: undefined },
    { name: '分', visible: 0, options: this.buildArrayForHMS(60), value: undefined },
    { name: '秒', visible: 0, options: this.buildArrayForHMS(60), value: undefined }
]

主要难点在于选择的时候要固定在开始时间和结束时间的范围内,我的做法是在a-select的dropdownVisibleChange方法中去做限制: 因为开始时间或者结束时间涉及的部分UK,所以需要增加一个对UK的处理方法,eg开始时间月份UK需要设置为00,结束时间月份UK需要设置为12

// UK转换 type==='begin'开始时间
    normalizeUKTime(timeStr,type) {
      if (!timeStr) return timeStr;
      // 分割日期和时间部分
      const parts = timeStr?.split(' ');
      let datePart = parts[0] || '';
      let timePart = parts[1] || '';
      // 处理日期部分
      if (datePart.includes('UK')) {
        const dateArr = datePart.split(/[-\/]/);
        if (dateArr[0] === 'UK') dateArr[0] = type==='begin'?'1900':new Date().getFullYear();  // 年UK转
        if (dateArr[1] === 'UK') dateArr[1] = type==='begin'?'01':'12';   // 月UK转
        if (dateArr[2] === 'UK') dateArr[2] = type==='begin'?'01':'31';   // 日UK转
        datePart = dateArr.join('-');
      }
      // 处理时间部分
      if (timePart.includes('UK')) {
        const timeArr = timePart.split(':');
        if (timeArr[0] === 'UK') timeArr[0] = type==='begin'?'00':'23';  // 时UK转
        if (timeArr[1] === 'UK') timeArr[1] = type==='begin'?'00':'59';  // 分UK转00
        timePart = timeArr.join(':');
      }
      
      // 重新组合
      return [datePart, timePart].filter(p => p).join(' ');
    },

接下来就需要对范围进行判断了 目前我用的是传统方式逐步对比,如果各位小伙伴有更好的方式也可以提出来,我试验下。 eg:年 通过类型得知是年后对比设置当前option范围。

当当当 就完成啦!