@gselltho非常感谢您打开此功能请求！
我认为在这个主题上，我们需要与我们的 @dynatrace-oss/ux-core 团队密切合作。 也许他们已经为此主题创建了一些模拟，或者他们可以为我们提供一些见解。

如果他们已经有一些模拟或设计，这个问题将是收集所有必要信息和 API 建议的一个很好的起点。

我不确定需要日期选择器的目的是什么，但 Arkadiusz Lipiarz 现在与他的团队合作开发了一个我们想用作全球时间范围选择器的日期选择器
它已经在我们的演示环境中实现了。 我想在这种情况下最好和他谈谈。

我们之前讨论过，@ursula-wieshofer 对产品做了一些评估，我们总共有一两个日期选择器。 这意味着这在优先级列表中并不高。

@gselltho我认为进一步讨论这一点并针对图书馆的补充是有意义的。
我认为我们可以从@angular/components 中学到很多东西并做一个简化的版本。
您能否为其创建更详细的 API 提案？

你好呀！

因此，我的团队创建的功能似乎适合@gselltho列出的用例等等。 除了我们网站的顶部，它也被仪表板团队用作本地组件。 我们在 Angular 和 GWT 中都准备了它。 如果您有兴趣，请在 Slack 上联系我。

但是……似乎 Ryan 和他的团队正在准备一个与您分享的内容非常相似的解决方案。 这是它的外观：

代码所有者是@areknow ，他可以为您提供更多详细信息。

嗨，伙计们，我不确定接下来会发生什么。 Ryans 团队的组成部分基本上是有角度的材料，正是我需要的。 但我想说，因为它是一个非常基本的组件，它的家应该是咖啡师组件，而且看起来，更多的团队可以使用它。

@ffriedl89 ：当然，我可以创建更详细的 API 描述。 至少对于第一个实现的有限功能集。 我将在接下来的几天内发布在这里

嗨@gselltho ，我是位于spine-x 存储库中的日期选择器共享组件的开发人员。 我已经和咖啡师团队谈过将它转移到咖啡师组件库，但不幸的是，它对几个材料包有很强的依赖性，这不是团队想要添加到项目中的东西。

Angular CDK 不包含日期选择器，这意味着该组件必须从头开始编写。

您使用来自 mono 回购的日期选择器共享组件有问题吗？

干杯

嗨@areknow ，你的组件很棒！ 我只是想念 Angulars Reactive Form 功能（ControlValueAccessor），所以它似乎必须是一个 DtFormFieldControl 才能在 Barista 和 Angular Reactive 表单中无缝使用它。

@gselltho感谢您再次联系。 正如@areknow概述的那样。 他的组件是一个重新设计的材料组件，它引入了对来自 angular/components 存储库的材料和其他实用程序库的依赖。 它还带有对 moment.js 的硬依赖，它非常庞大且不可摇树。
不幸的是，CDK 没有配备日期选择器，但它的样式不是材料方式。
到目前为止，日期选择器并不是许多团队需要的组件，因为除了产品中的全局时间范围选择器之外，我们没有任何日期选择器。

如果您需要该组件，如果我们可以共同努力将组件贡献给库，那就太棒了。 此过程首先在本期中为其创建 API 提案:)
完成此操作后，我们可以帮助您入门并指导您完成开发过程，我们将一路为您提供帮助。

现在咖啡师团队需要贡献者的帮助才能将此组件添加到库中。
非常感谢这里的任何帮助

嘿，会照顾它，因为设置 VCT 现在也需要一个日期/时间选择器。 在下面的评论中，我将尝试收集所有需求，然后提出一个 API。

如果您还有尚未列出的特性/要求，请告诉我。

抄送@areknow

要求：

一般要求

• 选择日期：用户必须能够选择日期
• 选择时间：除了选择日期之外，用户还必须能够选择其他时间。
• **预填充
• Disabled ：消费者可以禁用整个日期选择器。
• 可选范围：应该可以定义用户可以选择的日期范围（可以通过最小/最大输入实现）
• 时区：应该可以为用户选择的日期定义时区。

技术要求

• NgModel 兼容：日期选择器必须与角度形式兼容。
• 表单域兼容：日期选择器必须是有效的表单域控件。
• 模块化：日期选择器应该由几个子组件/指令/实用程序组成，因此消费者也可以只使用部件而不是完整的日期选择器组件（例如时间框架选择器的月视图）
• 本机日期对象：日期应由本机Date对象/类（包括整个面向消费者的 API）表示。 不是通过一些抽象的自定义实现。 可能需要其他实用程序功能/服务 ( DateAdapter )。
• 明暗模式：控件需要支持明暗主题

可选要求（不确定是否需要） ：

• 限制可选择日期：应该可以进一步限制（扩展最小/最大要求）可选择的日期（可以通过消费者可以实现的功能来实现）
• 范围：除了选择单个日期外，还应该可以选择一个日期范围（例如 1.1.2020 - 10.1.2020）
• 移动回退：在移动设备上，日期选择器应该回退到其原生版本（注意：我们需要检查为自定义版本定义的所有功能是否也支持原生版本）

API 提案

_ WIP：将随着时间的推移进行调整。

Datepicker 应该由多个组件组成：

DtDatepicker ( dt-datepicker )

日期选择器本身。 该组件将所有其他组件组合到一个可用的日期选择器中（请参阅需求）。

输入

| 姓名 | 类型 | 默认值 | 说明 |
| ---------- | ----------- | ------------- | ------------ |
| 价值 | D \| null | null | 选定的日期。 |
| 开始在 | D \| null | null | 最初打开日历的日期。 如果设置了selected则被忽略。 内部默认为今天的日期，仅用于显示。 |
| 分钟 | D \| null | null | 最小有效日期。 |
| 最大 | D \| null | null | 最大有效日期。 |
| 禁用 | boolean | false | 日期选择器是否被禁用。 |
| isTimeEnabled | boolean | false | 是否启用时间模式。 |
| isRangeEnabled | boolean | false | 是否启用范围模式。 |

DtCalendar ( dt-calendar )

用于在日历视图中选择日期的组件（ calendar-body组件）。 包括日历视图（月份）和在不同月份和年份之间导航的必要控件。

输入

| 姓名 | 类型 | 默认值 | 说明 |
| ---------- | ----------- | ------------- | ------------ |
| 选择 | D \| null | null | 当前选择的日期。 |
| 开始在 | D \| null | null | 表示开始日历的期间（月或年）的日期。
| 最小日期 | D \| null | null | 最小可选日期。 |
| 最大日期 | D \| null | null | 最大可选日期。 |

输出

| 姓名 | 类型 | 说明 |
| ---------------- | ----------- | ------------ |
| 选择更改 | D | 当当前选择的日期改变时发出。 |

日历正文（ dt-calendar-body ）

仅托管一个月的日历网格。

输入

| 姓名 | 类型 | 默认值 | 说明 |
| ------------ | ----------- | ------------- | ------------ |
| 活动日期 | D | 今天 | 在此月视图中显示的日期（忽略除月和年之外的所有内容）。 |
| 选择 | D \| null | null | 当前选择的日期。 |
| 最小日期 | D \| null | null | 最小可选日期。 |
| 最大日期 | D \| null | null | 最大可选日期。 |
| 日期过滤器 | (date: D) => boolean | - | 用于过滤日期是否可选的函数。 |

输出

| 姓名 | 类型 | 说明 |
| ------------------ | ----------- | ------------ |
| 选择更改 | EventEmitter<D> | 选择新值时发出。 |
| activeDateChange | EventEmitter<D> | 当任何日期被激活时发出。 |

时间选择器（'dt-timepicker'）

托管时间选择器，其中包含时间输入（带有小时和分钟输入）。

输入

| 姓名 | 类型 | 默认值 | 说明 |
| ------------ | ----------- | ------------- | ------------ |
| 值标签 | 字符串 | '' | 用于以范围模式显示日期的标签。
| 小时 | 数\| 空| 空| 在时间选择器中显示的小时。
| 分钟 | 数\| 空| 空| 在时间选择器中显示的分钟。
| 禁用 | 布尔值 | 假| 时间选择器及其输入的禁用状态。
| isTimeRangeEnabled | 布尔值 | 假| 是否启用时间范围模式。

输出

| 姓名 | 类型 | 说明 |
| ------------------ | ----------- | ------------ |
| 时间变更 | 事件发射器| 如果时间输入包含模糊的有效值，则发出 timeChange 事件。

时间输入（'dt-时间输入'）

托管时间输入，其中包含小时和分钟输入。

输入

| 姓名 | 类型 | 默认值 | 说明 |
| ------------ | ----------- | ------------- | ------------ |
| 小时 | 数\| 空| 空| 在时间输入中显示的小时。
| 分钟 | 数\| 空| 空| 在时间输入中显示的分钟。
| 禁用 | 布尔值 | 假| 输入的禁用状态。

输出

| 姓名 | 类型 | 说明 |
| ------------------ | ----------- | ------------ |
| 时间变更 | 事件发射器| 如果时间输入包含模糊的有效值，则发出 timeChange 事件。

请在日期选择器应提供的要求/功能下方张贴。 我会将它们添加到之前评论的列表中。

@thomaspink谢谢你的照顾👍
您的需求描述已经包含了我需要的一切。 我只有一个关于以下方面的问题：
Selecting a time: In addition to selecting a date the user must also be able to select an additional time.
时间是可选的，我猜？ 我能选择什么是可选择的：只有日期、只有时间，还是两者结合？

@gselltho感谢您的反馈👍

这个想法是将日期和时间作为默认值，但您可以禁用时间部分以使其仅显示日期，或者相反。 不确定最好的方法是什么（是否更多的消费者只需要一个日期选择器或日期/时间选择器）。

能够控制时区会很好。 我们在 Spine X 中的一些用例需要 UTC 才能与某些遗留 API 进行交互。

也像@gselltho说的那样，可以选择单独约会会很好。

感谢这个项目！

这会包括预定义的相对日期吗？ 如“现在”、“两周前”等？

还有一项要求（~ GTS）：

• 我们需要明暗版本

很高兴有：

• 在移动浏览器上 -> 回退到本机日期/时间选择控件

@toddbaert除了全局时间范围选择器之外，这也是这个通用日期选择器的用例吗？

@pieniazek @areknow添加到列表

@thomasink我认为由于一致性原因，并且为了使用户更容易处理日期选择器，我们应该坚持使用全局时间范围选择器的一部分，其中也包括日历。 基本功能和处理应该与样式相同。
这将支持用户处理它，因为他/她已经习惯了该功能。

@thomaspink对用户来说不会是一个交易破坏者，但我们很快就会公开一些用户界面，预定义的相对日期可能会对这些用户界面有用。

@toddbaert你有支持的值列表吗？ 如果你觉得合适的话，我会把它添加到好清单中

对于日期选择器，我们还需要某种服务（类似于角材料数据适配器）为我们提供功能和信息，以便我们一方面可以显示日期和正确的命名（包括工作日名称）并计算/另一方面，使用本地日期。 然后，我们的消费者也应该可以使用此“服务”，以便他们可以以相同的方式处理日期，并且我们可以共享此功能。

为此，我们至少有 2 个选项（如果您有更多想法，我将不胜感激，如果您能将它们发布在下面）：

1. 创建一个 NativeDateAdapter，它结合了本机日期 API（ Intl 、 Date ）和实用程序函数（例如addCalendarDays ）。 这个 Adapter 与 Angular Materials NativeDateAdapter非常相似。 但是对于我们的用例，当Intl不可用时，我们不需要回退，因为我们所有支持的浏览器都已经有Intl' built in. We would also not need the possibility to have DateAdapter for different libraries as we only work with the native Date` API。
2. 使用诸如date-fns类的外部库并将其包装到我们然后提供给客户的服务 (DateAdapter) 中。

现在我更倾向于选项 1，因为它大量使用本机 API 而不需要额外的库，但也请发布您的想法、发现和评论:)

@thomasink我同意我们应该创建这样的适配器服务。 我知道我之前说过，我很乐意为这个使用Intl和Date本地人，但我仔细检查了对Intl.DateFormat的支持，但我没有超级高兴。 尤其是部分缺失的 Range 格式有点令人伤心。

看到date-fns是treeshakable 并且通常看起来不是一个大型库，我现在选择使用date-fns 。
此外，即使在处理客户端时区等时有很多本机支持，日期和时间数学也可能非常困难......

正如我所看到的，您已经为日期选择器创建了一个 PR 草案。 关于组件，您是否已经可以提出一个 API？

关于Intl.DateFormat ：对于我现在偶然发现的用例，可以轻松实现回退，但我同意自定义日期/时间计算可能很困难。

这个 PR 是 wip，我还没有处理需要这种服务的任务。 仍然不确定这项服务需要哪些功能，但我将从一个基本功能开始，并在途中扩展它。

时区

最近我们放弃了这个要求。 有许多微小而复杂的细节需要考虑，从用户体验的角度很难向用户解释。

日期操作库

date-fns 是用于时移操作的出色 API，例如addMonth 、 getDaysInMonth 、 isToday 、 startOfTheWeek等。Tree-shake 的能力使其轻量级使用. 可能它会花费与适配器抽象一样多的重量。

另一方面，如果图书馆消费者需要在有 moment 或 luxon 时包含date-fns ，他们会感觉很复杂 -> 这里适配器会很有用。 不过，我们很幸运地使用了date-fns ，所以这对我们来说不是问题。

关于时区的注意事项：如果您想实现全时区支持，则date-fns将不适合（即使使用date-fns-tz仅解决格式/解析问题，但没有日期操作方案）。 最近我们考虑将luxon用于此目的，至少在Temporal 规范未完成并被浏览器采用之前。

格式化

• 你知道为什么 Angular Material datepicker 不简单地使用 DetePipe 吗？
• 缺少Intl.DateFormat范围格式：也许我们可以实现自己的回退或使用 polyfil？ 在产品方面，我们已经有了一些东西。
• 请注意，如果我们不使用 DetePipe 进行格式化，则最好支持LOCALE_ID标记来控制文本的翻译方式。

谢谢@piotrl

据我了解，DatePipe 仅可用于显示最终选择的日期，但不适用于计算/显示以下内容：某月的所有天数。

当我阅读所有评论时，我认为我们可以同意适配器概念应该是要走的路。 然后，我们可以为本机、 date-fns或luxon创建一个适配器，具体取决于我们将要达成一致的解决方案。 正如@piotrl提到的，这也将解决当消费者拥有自己的日期库时，可以轻松实现新适配器的问题。

@ffriedl89 @tomheller你的想法？
@piotrl ：如果我们要实现一个日期适配器，集群是否也会将它用作中央日期入口点？ 如果您能支持我，那也太好了，因为您在这个主题上有很多专业知识？

另一个积极的副作用是，如果我们密切关注材料日期适配器的 api，并且他们会将其移动到 cdk，我们可以轻松地对其进行调整和更改。

@areknow

能够控制时区会很好。 我们在 Spine X 中的一些用例需要 UTC 才能与某些遗留 API 进行交互。

拥有日期适配器也可以解决这个需求，因为日期选择器将日期视为适配器提供的任何通用对象。 这可以是本地日期、时刻包装器或始终具有特定时区的日期。

如果我们要实现一个日期适配器，集群是否也会将它用作中央日期入口点？

我愿意考虑。 我最初的想法：原始日期对象已经在 600 多个地方使用（明确地，不能计算隐式用法）。

大多数用法无论如何都不会连接到日历或接近日历。 在我寻找用法时，通常日期来自后端，并且出于格式化目的进行了轻微处理。 仅为了与日历保持一致而将适配器用于这些用例可能会让人不知所措。 因此，每当我们使用日历时，我都会考虑从原生 Date 到 Adapter 的小转换（如果我们需要 Adapter 作为@Input ）。

所以如果我们决定使用适配器，还有两种方法：

1. 仅在模块配置中为内部日历日期操作提供适配器，模型（输入/输出）仍将基于本地日期
2. 为内部使用 + 输入/输出 API 提供适配器。

就用例而言，第二个选项更具侵入性，需要经过深思熟虑的适配器 API。
第一个选项可能更容易开始，如果需要，可以演变为第二个选项。

移至 APM-266081