feat(calendar): support setting start or end of range separately

[shumuuu]

🤔 这个 PR 的性质是？

• 日常 bug 修复
• 新特性提交
• 文档改进
• 演示代码改进
• 组件样式/交互改进
• CI/CD 改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他

🔗 相关 Issue

• resolved [calendar] range支持单独设置开始时间或结束时间 #6125

💡 需求背景和解决方案

单独设置日历范围上/下限本质上为完善对range参数传入值的数据处理，即处理以下情况：

1. 传入非列表值/传入列表值少于两项/传入列表值的两项均非日期格式
2. 传入列表值的两项中有一项符合日期格式，另一项不符合
3. 传入列表值的两项均符合日期格式

以上核心在于判断列表值的两项是否符合日期格式，故首先增加了一个日期格式校验逻辑

// packages\components\calendar\calendar.tsx L52~54
const parseRangeBoundary = (value: CalendarRange['from'] | CalendarRange['to'] | null | undefined) => {
  if (value === undefined || value === null) {
    return null;
  }
  const parsed = dayjs(value);
  if (!parsed.isValid()) {
    return null;
  }
  return {
    parsed, // dayjs 对象
    original: value as CalendarRange['from'] | CalendarRange['to'], // 原始值
  };
};

然后在解构出列表值的两项后先进行日期格式校验即可直接处理第一种情况。

// packages\components\calendar\calendar.tsx L71~72
const start = parseRangeBoundary(v1);
const end = parseRangeBoundary(v2);

随后添加fallback逻辑，当出现第二种情况时，为空缺的另外一侧边界填充内置值；若为第三种情况则保持原逻辑不变

// packages\components\calendar\calendar.tsx L79~101
const fallback = (edge: 'from' | 'to'): { parsed: dayjs.Dayjs; original: string } => {
  let fallbackParsed = dayjs(MIN_YEAR);
  if (edge === 'to') {
    fallbackParsed =
      dayjs.isDayjs(state.curDate) && state.curDate?.isValid() ? state.curDate : utils.createDefaultCurDate();
  }
  return {
    parsed: fallbackParsed,
    original: fallbackParsed.format('YYYY-MM-DD'),
  };
};

let fromBoundary = start ?? fallback('from');
let toBoundary = end ?? fallback('to');

if (fromBoundary.parsed.isAfter(toBoundary.parsed)) {
  [fromBoundary, toBoundary] = [toBoundary, fromBoundary]; // 当前一项日期大于后一项时交换两值以确保边界逻辑正确
}

return {
  from: fromBoundary.original,
  to: toBoundary.original,
};

📝 更新日志

• 本条 PR 不需要纳入 Changelog

tdesign-vue-next

• feat(calendar): range参数支持单独设置范围开始或范围结束
• docs(calendar): 新增单独设置日历范围上限或下限的用例

@tdesign-vue-next/chat

@tdesign-vue-next/auto-import-resolver

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• Changelog 已提供或无须提供

[tdesign-bot]

TDesign Component Site Preview Open

Component	Preview
tdesign-vue-next
@tdesign-vue-next/chat

[pkg-pr-new]

tdesign-vue-next-demo

npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/auto-import-resolver@6211

npm i https://pkg.pr.new/Tencent/tdesign-vue-next@6211

npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/chat@6211

commit: f8331e3