Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

时间日期相关组件接口问题 #814

Open
Justineo opened this issue Apr 23, 2021 · 6 comments
Open

时间日期相关组件接口问题 #814

Justineo opened this issue Apr 23, 2021 · 6 comments

Comments

@Justineo
Copy link
Member

Justineo commented Apr 23, 2021

目前 DatePickervalue 类型为 DateTimePickervalue 类型为 string(例如 '10:08'),后续可能还会支持 DateTimePickervalue 类型应该会是 Date。这样感觉其实有点奇怪。由于后续 JavaScript 应该会原生支持 Temporal,可以考虑将三者的接口分别对应到 Temporal.PlainDate/Temporal.PlainTime/Temporal.PlainDateTimefrom 方法参数上面(也需要考虑 DatePicker[type="year"]DatePicker[type="month"]),已保证未来可以方便地构造 Temporal 对象。

Ps. 发现 TimePicker 用的 modeDatePicker 用的 type,也需要统一一下。

interface DatePickerDayValue {
  year: number,
  month: number,
  day: number
}

interface DatePickerMonthValue {
  year: number,
  month: number
}

interface TimePickerValue {
  hour: number,
  minute: number,
  second: number
}

interface DateTimePickerValue extends DatePickerDateValue, TimePickerValue  {}
组件 type value 类型
DatePicker day DatePickerDayValue
DatePicker month DatePickerMonthValue
DatePicker year number
TimePicker / TimePickerValue
DateTimePicker / DateTimePickerValue

兼容性和迁移

可以考虑添加一个 temporal prop,来开启新的接口,未来 major 版本升级的时候切换到新的逻辑上,把当前的兼容处理去除。未开启的情况下,可以考虑 warning 提示升级。

另外,Temporal 接口的 month 不是从 0 开始的,而是更符合直觉的 112

@fuchunhui
Copy link
Contributor

fuchunhui commented Apr 23, 2021

TimePicker 遇到过显示时分时分秒的场景。
考虑通过类型区分 or 入参区分?

from参数的options选项,也建议支持。

@Justineo
Copy link
Member Author

TimePicker 遇到过显示时分时分秒的场景。

这个现在已经支持了,有 mode prop。(后面可能得统一成 type

from参数的options选项,也建议支持。

我看了下 options 里面目前主要是配置是不是允许超范围的值,我理解我们默认不处理就行,最终也会转换成 Date 来计算的。

@Justineo
Copy link
Member Author

需要讨论的 value 类型:

  1. DatePicker[type="year"] - number or { year: number }
  2. TimePicker[type="hour"] - number or { hour: number }

@fuchunhui
Copy link
Contributor

保持结构统一,更倾向于使用DatePickerDayValue这样的格式,既{ year: number } and { hour: number }。

@Justineo
Copy link
Member Author

又看了一下 Temporal 相关的 API,发现只有类似 Temporal.PlainDate.from 这样的方法可以接受一个我们在这里讨论的 plain object 作为参数,但是没有把 Temporal.PlainDate 对象转成 { year, month, day } 的形式的。所以如果用这样的格式作为接口的话其实即使在支持 Temporal 的环境下,用户要从 Temporal 对象转成我们需要的格式依然需要手动 pick 对应字段出来,感觉不太理想。所以这个设计需要重新考虑一下,有两个选择:

  1. 在未来再直接统一使用 Temporal 提案中的原生对象如 Temporal.PlainDate
  2. 归一化到 Temporal 提案默认使用的 ISO 8601 的字符串格式(YY-MM-DD/YY-MM-DDThh:mm:ss/...)。

@Justineo
Copy link
Member Author

Justineo commented Sep 29, 2022

ISO 8601 对应的日期格式

对象 类型 (Temporal.*) 格式 示例
日期 PlainDate YYYY-MM-DD 2018-11-13
月份 PlainYearMonth YYYY-MM 2018-11
年份 PlainYear YYYY 2018
日期+时间 PlainDateTime YYYY-MM-DDThh:mm:ss 2018-11-13T09:48:12
时间 PlainTime hh:mm:ss 09:48:12
星期 - - -
季度 - - -

星期有其特殊性,比如 2022-01-01 那一周实际上是 2021-W52。在设计接口时可能更适合将其转换为日期范围。季度虽无此问题但亦可考虑用这种方式。

特殊逻辑 输出格式
星期选择 ['2018-11-12', '2018-11-18']
多星期选择 ['2018-11-12', '2018-11-18']
星期范围选择 ['2018-11-12', '2018-11-25']
多星期范围选择 [['2018-11-12', '2018-11-25'], ['2022-09-26', '2022-10-09']]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants