因业务需要,对时间增加UK(未知)操作,具体如下:
年月日时分都可以选择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范围。
当当当 就完成啦!