TimePicker.RangePicker format should support array type

[afc163]

<TimePicker.RangePicker order={false} format={['当日 HH:mm', '次日 HH:mm']} />

[github-actions]

Hello @afc163. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @afc163，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

[zombieJ]

当日 和 次日 这个是不能决定的。
05:00 ~ 06:00 到底是 当日 05:00 ~ 当日 06:00 还是 当日 05:00 ~ 次日 06:00。

这里隐含了业务信息 “在 24 小时内”，或者“某个时间点开始算次日”。

[afc163]

对，这个得靠选。

format 和这个没关系，本来就应该支持两个分开定制。

[Flcwl]

@zombieJ 大佬，我建议加个组件，这种场景还是蛮多的。#49364

  <TimePicker.CrossRangePicker
    value={{
      // 标识当前是否为跨日时段，如果是，`end` 的时间标识次日的时间点；如果否，则 `[start, end]` 表示为同一天的时段。
      crossDate: boolean,
      // 开始时间点
      startTime: '22:00:00',
      // 结束时间点
      endTime: '6:00:00',
    }}
  />

[zombieJ]

这个意思？

https://stackblitz.com/edit/react-kdkub3-crr1vs?file=demo.tsx

[zombieJ]

@zombieJ 大佬，我建议加个组件，这种场景还是蛮多的。#49364

这个就是我上面提到的，05:00 ~ 06:00 这个 06:00 到底算当日还是算次日，这个是业务逻辑决定的。我可以是 24 小时内，也可以是规定 5 点之后所有时间都算次日。

[afc163]

原来 format 已经支持 function 类型了，那文档需要补一下。

[Flcwl]

这个意思？

https://stackblitz.com/edit/react-kdkub3-crr1vs?file=demo.tsx

@zombieJ 我理解你的意思，相当于开始时间大于结束时间则表示跨日。假设业务要求时间段长度必须在24小时内，这样就是可以接受的。

但是 format 是不是得支持返回数组分别设置开始和结束的输入框内容， 不然选了 9点 ~ 8 点，再选 7点 ~ 8点，下拉框会出现如下情况的bug。

[Flcwl]

这个意思？

https://stackblitz.com/edit/react-kdkub3-crr1vs?file=demo.tsx

@zombieJ @afc163 还是2个问题没有解决：

1. 目前只满足业务时间段长度不能超过24小时的场景，超过24小时的长度时间段选择没法支持；
2. 还是从用户体验角度来看，UI语义没有那么明确，这个东西对用户来讲，得要试一下才会发现可以选择跨日的。

所以我的提议方案 #49364 要不要再考虑考虑。。。感谢~

[Flcwl]

这个意思？
https://stackblitz.com/edit/react-kdkub3-crr1vs?file=demo.tsx

@zombieJ 我理解你的意思，相当于开始时间大于结束时间则表示跨日。假设业务要求时间段长度必须在24小时内，这样就是可以接受的。

但是 format 是不是得支持返回数组分别设置开始和结束的输入框内容， 不然选了 9点 ~ 8 点，再选 7点 ~ 8点，下拉框会出现如下情况的bug。

@zombieJ 问题好像出在 onCalendarChange 不是选择时间实时回调的。。有实时回调的函数吗？

[zombieJ]

不然选了 9点 ~ 8 点，再选 7点 ~ 8点，下拉框会出现如下情况的bug。

录个 gif 看看？

[Flcwl]

不然选了 9点 ~ 8 点，再选 7点 ~ 8点，下拉框会出现如下情况的bug。

录个 gif 看看？

@zombieJ 了解了，V5没问题。我本地用的V4才会复现。那请问V4除了升级到V5有解决办法吗？ https://stackblitz.com/edit/react-kdkub3-ahupgs?file=demo.tsx

2024-06-13.15.26.53.mov

[zombieJ]

v5 重写了 rc-picker，v4 已经过了维护期了。可以考虑升级，或者自己封装 rc-picker。

[Flcwl]

v5 重写了 rc-picker，v4 已经过了维护期了。可以考虑升级，或者自己封装 rc-picker。

@zombieJ 这就难过了， V4给你们提个feature，支持 下拉面板选择时间实时回调 可以吗？ 成本相对最低。。

[Flcwl]

@afc163 @zombieJ 如果 V4 format 支持函数，然后函数的入参 加个第二个参数，info.range = 'start | end' 来区分format来源也是可以实现期望的效果的。看行不？

[Flcwl]

@zombieJ 我看你们 format 内部 支持函数，也支持函数数组，我理解是想分别渲染前后输入框内容的，，，但范围时间选择器输入框渲染时，你们只取第一个函数来处理渲染。是不是有bug。

[Flcwl]

果然，format 目前不支持数组渲染前后输入框。 难怪 afc163 要另起这个 issue

[afc163]

@Flcwl 确实可以支持一下，来个 PR？

[zombieJ]

format 支持数组是允许输入时的解析，比如：

format={['YYYYMMDD', 'YYYY-MM-DD', 'DD/MM/YYYY']}

当用户输入 20000101 或者 2000-01-01 或者 01/01/2000 都能正确被解析到日期上。它不是用来支持 startField 和 endField。所以即便要支持是哪个 field 也应该是 function 里提供参数来添加。