@gsellthoこの機能リクエストを開いていただき、ありがとうございます。
このトピックについては、@ dynatrace-oss / ux-coreチームとの緊密なコラボレーションが必要だと思います。 たぶん、彼らはこのトピックのためにすでにいくつかのモックを作成しているか、私たちにいくつかの洞察を提供することができます。

彼らがすでにいくつかのモックやデザインを持っている場合、この問題はすべての必要な情報とAPI提案を収集するための良い出発点になります。

日付ピッカーがどの目的に必要かはわかりませんが、Arkadiusz Lipiarzは、グローバルタイムフレームセレクターとして使用したい日付ピッカーについて、彼のチームと長い間協力しています。
デモ環境にはすでに実装されています。 この場合、彼と話すのが最善だと思います。

過去に話し合いがあり、@ ursula-wieshoferが製品の評価を行い、合計で1つか2つの日付ピッカーがあります。 これは、これが優先順位リストで高くなかったことを意味しました。

@gsellthoこれについてさらに議論し、ライブラリへの追加をターゲットにすることはかなっていると思います。
@ angular / componentsから多くのことを学び、簡略化されたバージョンを作成できると思います。
より詳細なAPIプロポーザルを作成できますか？

こんにちは！

したがって、私のチームが作成した機能は、 @ gsellthoにリストされているユースケースなどに適合するようです。 当サイトのトップに加えて、ダッシュボードチームによってローカルコンポーネントとしても使用されています。 AngularとGWTの両方で準備しました。 興味があれば、Slackについて私に連絡してください。

しかし...ライアンと彼のチームは、あなたが共有したものと非常によく似たソリューションを準備していたようです。 外観は次のとおりです。

コードの所有者は@areknowであり、彼はあなたに詳細を提供することができます。

こんにちはみんな、私は次に何がわからない。 Ryansチームのコンポーネントは、基本的に角張った素材であり、私が必要としているものを正確に表しています。 しかし、それは非常に基本的なコンポーネントであるため、そのホームはバリスタコンポーネントである必要があり、見たところ、より多くのチームがそれを使用できると思います。

@ ffriedl89 ：もちろん、より詳細なAPIの説明を作成できます。 少なくとも、最初の実装の限られた機能セットについては。 数日中にここに投稿します

こんにちは@gselltho 、私はspine-xリポジトリにある日付ピッカー共有コンポーネントの開発者です。 バリスタコンポーネントライブラリへの転送についてはすでにバリスタチームと話しましたが、残念ながら、チームがプロジェクトに追加したくないいくつかのマテリアルパッケージに強く依存しています。

Angular CDKには日付ピッカーが含まれていないため、このコンポーネントはゼロから作成する必要があります。

モノリポジトリの日付ピッカー共有コンポーネントの使用に問題はありますか？

乾杯

こんにちは@areknow 、あなたのコンポーネントは素晴らしいです！ Angulars Reactive Form機能（ControlValueAccessor）が恋しいので、BaristaおよびAngularReactiveフォーム内でシームレスに使用するにはDtFormFieldControlである必要があるようです。

@gsellthoもう一度お問い合わせいただきありがとうございます。 @areknowの概要とまったく同じです。 彼のコンポーネントは、角度/コンポーネントリポジトリからマテリアルおよび他のutilライブラリへの依存関係を導入するスタイル変更されたマテリアルコンポーネントです。 また、moment.jsへの強い依存関係があります。これは巨大で、ツリーを揺るがすことはできません。
残念ながら、CDKにはまだ日付ピッカーが付属していません。
これまで、製品にはグローバルタイムフレームセレクター以外の日付ピッカーがないため、日付ピッカーは多くのチームが必要とするコンポーネントではありませんでした。

コンポーネントが必要な場合は、コンポーネントをライブラリに提供するために協力できれば素晴らしいと思います。 このプロセスは、この号でAPIプロポーザルを作成することから始まります:)
これが完了すると、私たちはあなたが始めて開発プロセスを案内するのを手伝うことができ、その過程であなたを手伝います。

現在、バリスタチームは、このコンポーネントをライブラリに追加するために、寄稿者の支援を必要としています。
ここでの助けは大歓迎です

ねえ、設定VCTにも日付/タイムピッカーが必要なので、それを処理します。 以下のコメントでは、すべての要件を収集してからAPIを提案します。

まだリストされていない、そこにあるべき機能/要件もある場合は、私に知らせてください。

cc @areknow

要件：

一般的な要件

• 日付の選択：ユーザーは日付を選択できる必要があります
• 時間の選択：日付の選択に加えて、ユーザーは追加の時間を選択できる必要があります。
• **プレフィル
• 無効：コンシューマーは日付ピッカー全体を無効にすることができます。
• 選択可能な範囲：ユーザーが選択できる日付の範囲を定義できる必要があります（最小/最大入力を介して実装できます）
• タイムゾーン：ユーザーが選択した日付のタイムゾーンを定義できる必要があります。

技術要件

• NgModel互換：日付ピッカーは角度フォームと互換性がある必要があります。
• フォームフィールド互換：日付ピッカーは有効なフォームフィールドコントロールである必要があります。
• モジュール性：日付ピッカーは、いくつかのサブコンポーネント/ディレクティブ/ユーティリティで構成する必要があります。これにより、消費者は、完全な日付ピッカーコンポーネントの代わりに、パーツのみを使用することもできます（例：時間枠セレクターの月表示）
• ネイティブDateオブジェクト：日付は、ネイティブDateオブジェクト/クラス（コンシューマー向けAPI全体を含む）で表す必要があります。 いくつかの抽象的なカスタム実装によるものではありません。 追加のユーティリティ関数/サービス（ DateAdapter ）が必要になる場合があります。
• ライト＆ダークモード：コントロールはライトとダークのテーマをサポートする必要があります

オプション要件（必要かどうかわからない） ：

• 選択可能な日付の制限：
• 範囲：単一の日付を選択することに加えて、日付の範囲を選択することも可能である必要があります（例：1.1.2020〜10.1.2020）
• モバイルフォールバック：モバイルデバイスでは、datepickerはネイティブバージョンにフォールバックする必要があります（注：カスタムバージョン用に定義されたすべての機能がネイティブバージョンでもサポートされているかどうかを確認する必要があります）

API提案

_ WIP：時間の経過とともに適応されます。

Datepickerは、複数のコンポーネントで構成されている必要があります。

DtDatepicker（ dt-datepicker ）

デートピッカー自体。 このコンポーネントは、他のすべてのコンポーネントを1つのuseabe datepickerに結合します（要件を参照）。

入力

| 名前| タイプ| デフォルト値| 説明|
| ---------- | ----------- | ------------- | ------------ |
| 値| D \| null | null | 選択した日付。 |
| startAt | 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 | 現在選択されている日付。 |
| startAt | D \| null | null | カレンダーを開始する期間（月または年）を表す日付。
| minDate | D \| null | null | 選択可能な最小の日付。 |
| maxDate | D \| null | null | 選択可能な最大日付。 |

出力

| 名前| タイプ| 説明|
| ---------------- | ----------- | ------------ |
| selectedChange | D | 現在選択されている日付が変更されると発生します。 |

カレンダー本文（ dt-calendar-body ）

1か月間カレンダーグリッドのみをホストします。

入力

| 名前| タイプ| デフォルト値| 説明|
| ------------ | ----------- | ------------- | ------------ |
| activeDate | D | 今日| 今月ビューに表示する日付（月と年以外はすべて無視されます）。 |
| 選択済み| D \| null | null | 現在選択されている日付。 |
| minDate | D \| null | null | 選択可能な最小の日付。 |
| maxDate | D \| null | null | 選択可能な最大日付。 |
| dateFilter | (date: D) => boolean | -| 日付が選択可能かどうかをフィルタリングするために使用される関数。 |

出力

| 名前| タイプ| 説明|
| ------------------ | ----------- | ------------ |
| selectedChange | EventEmitter<D> | 新しい値が選択されたときに発生します。 |
| activeDateChange | EventEmitter<D> | いずれかの日付がアクティブになると発生します。 |

タイムピッカー（ 'dt-timepicker'）

時間入力（時間と分の入力を含む）を含むタイムピッカーをホストします。

入力

| 名前| タイプ| デフォルト値| 説明|
| ------------ | ----------- | ------------- | ------------ |
| valueLabel | 文字列| '' | 範囲モードで日付を表示するために使用されるラベル。
| 時間| 番号\ | null | null | タイムピッカーに表示する時間。
| 分| 番号\ | null | null | タイムピッカーに表示する分。
| 無効| ブール値| false | タイムピッカーとその入力の無効状態。
| isTimeRangeEnabled | ブール値| false | 時間範囲モードが有効かどうか。

出力

| 名前| タイプ| 説明|
| ------------------ | ----------- | ------------ |
| timeChange | EventEmitter| 時間入力にぼかしの有効な値が含まれている場合、timeChangeイベントを発行します。

時間入力（ 'dt-timeinput'）

時間と分の入力を含むtimeinputをホストします。

入力

| 名前| タイプ| デフォルト値| 説明|
| ------------ | ----------- | ------------- | ------------ |
| 時間| 番号\ | null | null | 時間入力に表示する時間。
| 分| 番号\ | null | null | 時間入力に表示する分。
| 無効| ブール値| false | 入力の無効状態。

出力

| 名前| タイプ| 説明|
| ------------------ | ----------- | ------------ |
| timeChange | EventEmitter| 時間入力にぼかしの有効な値が含まれている場合、timeChangeイベントを発行します。

日付ピッカーが提供する必要のある要件/機能を以下に投稿してください。 前のコメントのリストに追加します。

@thomaspinkこれを世話してくれてありがとう👍
要件の説明には、私が必要とするすべてのものがすでに含まれています。 私はただ質問があります：
Selecting a time: In addition to selecting a date the user must also be able to select an additional time.
時間はオプションですよね？ 日付のみ、時間のみ、またはその両方の組み合わせで、選択可能なものを選択できますか？

@gsellthoフィードバックをありがとう👍

アイデアは、デフォルトとして日付と時刻を使用することでしたが、時間部分を無効にして日付のみにするか、またはその逆にすることができます。 最善の方法がわからない（より多くの消費者が日付セレクターまたは日付/時刻セレクターのみを必要とするか）。

タイムゾーンを制御できると便利です。 スパインXのユースケースの一部では、特定のレガシーAPIとやり取りするためにUTCが必要です。

また、 @ gsellthoが言ったように、日付だけを持つオプションがあると便利です。

このプロジェクトをありがとう！

これには、事前定義された相対的な日付が含まれますか？ 「今」、「2週間前」などのように？

もう1つの要件（〜GTS）：

• 明るいバージョンと暗いバージョンが必要です

あった方がよい：

• モバイルブラウザの場合->ネイティブの日付/時刻ピッキングコントロールへのフォールバック

@toddbaertグローバルタイムフレームセレクターとは別に、これはこの一般的な日付ピッカーのユースケースでもありますか？

@ pieniazek @ areknowがリストに追加されました

@thomaspink一貫性の理由と、ユーザーが日付ピッカーを簡単に処理できるようにするために、カレンダーも含まれるグローバルタイムフレームセレクターの部分に固執する必要があると思います。 基本的な機能と取り扱いは、スタイルと同じである必要があります。
これは、ユーザーがすでに機能に慣れているため、ユーザーがそれを扱うときにサポートします。

@thomaspinkはユーザーにとって大きな問題にはなりませんが、事前定義された相対的な日付が役立つ可能性のあるUIを間もなく公開します。

@toddbaertサポートされている値のリストはありますか？ よろしければ、リストに追加します

日付ピッカーの場合、機能と情報を提供する何らかのサービス（Angular Materials Data-Adapterと同様）も必要になります。これにより、日付と正しい名前（平日の名前を含む）を表示して計算できます。一方、ネイティブの日付を使用します。 この「サービス」は、消費者も同じように日付を操作できるようにし、この機能を共有できるようにする必要があります。

そのために、少なくとも2つのオプションがあります（より多くのアイデアがある場合は、以下に投稿していただければ幸いです）：

1. ネイティブ日付API（ Intl 、 Date ）とユーティリティ関数（ addCalendarDays ）を組み合わせたNativeDateAdapterを作成します。 このアダプタは、角度マテリアルに非常に似ていますNativeDateAdapter 。 ただし、サポートされているすべてのブラウザにはすでに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があるため、ユースケースではIntlが利用できない場合のフォールバックは必要ありません。
2. date-fnsなどの外部ライブラリを使用して、それをサービス（DateAdapter）にラップし、顧客に提供します。

今のところ、追加のライブラリを必要とせずにネイティブAPIを多用するため、オプション1を使用する傾向がありますが、アイデア、調査結果、コメントも投稿してください:)

@thomaspinkこのようなアダプタサービスを作成する必要があることに同意します。 以前に述べたように、これにはIntlとDateネイティブを使用したいのですが、 Intl.DateFormatのサポートを再確認しましたが、そうではありません。それについてとても幸せです。 特に部分的に欠落している範囲フォーマットは少し悲しいです。

date-fnsはツリーシェイク可能であり、一般に大きなライブラリではないように見えるので、 date-fnsを使用することにします。
さらに、クライアントのタイムゾーンなどを処理するときに多くのネイティブサポートがある場合でも、日付と時刻の計算は非常に難しい場合があります...

ご覧のとおり、日付ピッカーのPRドラフトはすでに作成されています。 コンポーネントに関して、提案できるAPIはすでにありますか？

Intl.DateFormatについて：私が今偶然見つけたユースケースでは、フォールバックは簡単に達成できますが、カスタムの日付/時刻の計算は難しい場合があることに同意します。

このPRは仕掛品であり、私はまだそのようなサービスを必要とするタスクに取り組んでいませんでした。 このサービスに必要な機能はまだわかりませんが、基本的な機能から始めて、途中で拡張していきます。

時間帯

最近、この要件を削除しました。 UXの観点からユーザーに説明するのが難しい、考慮すべき小さいながらも複雑な詳細がたくさんあります。

日付操作ライブラリ

date-fnsは、 addMonth 、 getDaysInMonth 、 isToday 、 startOfTheWeekなどのタイムシフト操作に最​​適なAPIです。ツリーシェイク機能により、軽量な使用が可能になります。 。 おそらく、アダプターの抽象化と同じくらいの重みがかかります。

一方、図書館の消費者は、モーメントやルクソンがあるときにdate-fnsを含める必要がある場合、複雑な感情を抱くでしょう->ここでアダプターが役立ちます。 運が良ければdate-fnsを使用できるので、問題にはなりません。

タイムゾーンに関する注意： date-fnsは、フルタイムゾーンのサポートを実装する場合には適していません（フォーマット/解析の問題のみを解決し、日付操作のシナリオは解決しないdate-fns-tzを使用する場合でも） ）。 最近、少なくとも一時的な仕様が完成してブラウザに採用されるまでは、この目的でluxonを使用することを検討しました。

書式設定

• Angular Materialのdatepickerが単にDetePipeを使用しない理由を知っていますか？
• Intl.DateFormatからの範囲フォーマットの欠落：おそらく、独自のフォールバックを実装するか、polyfilを使用できますか？ 製品にはすでに何かがあります。
• 書式設定にDetePipeを使用しない場合は、テキストの翻訳方法を制御するためにLOCALE_IDトークンをサポートするとよいでしょう。

ありがとう@piotrl

私が理解している限り、DatePipeは最終的に選択された日付を表示する場合にのみ役立ちますが、次のようなものを計算/表示する場合には役立ちません。特定の月のすべての日。

すべてのコメントを読んだとき、アダプターの概念が進むべき道であることに同意できると思います。 次に、合意するソリューションに応じて、ネイティブ、 date-fns 、またはluxon用のアダプターを作成できます。 @piotrlが述べたように、これは、コンシューマーが独自の日付ライブラリを持っている場合、新しいアダプターを簡単に実装できるという問題も解決します。

@ ffriedl89 @tomhellerあなたの考えは？
@piotrl ：日付アダプターを実装する場合、クラスターはそれを中央の日付エントリポイントとしても使用しますか？ また、このトピックに関する専門知識がたくさんあるので、私をサポートしていただければ幸いです。

もう1つのプラスの副作用は、マテリアルの日付アダプターのAPIに厳密に固執し、それをcdkに移動する場合、簡単に適応して変更できることです。

@知っています

タイムゾーンを制御できると便利です。 スパインXのユースケースの一部では、特定のレガシーAPIとやり取りするためにUTCが必要です。

日付アダプターを使用すると、この要件も解決されます。これは、日付ピッカーが日付をアダプターが提供する汎用オブジェクトとして扱うためです。 これは、ネイティブの日付、モーメントラッパー、または常に特定のタイムゾーンを持つ日付にすることができます。

日付アダプターを実装する場合、クラスターはそれを中央の日付エントリポイントとしても使用しますか？

私はそれを検討することを開いています。 私の最初の考え：Raw Dateオブジェクトはすでに600以上の場所で使用されています（明示的に、暗黙の使用をカウントすることはできません）。

ほとんどの使用法は、とにかくカレンダーに接続されていないか、カレンダーに近いものではありません。 使用法を探すとき、通常、日付はバックエンドから取得され、フォーマットの目的でわずかに処理されます。 カレンダーとの整合性のためだけにこれらのユースケースにアダプターを使用することは、圧倒される可能性があります。 したがって、カレンダーを使用するときはいつでも、ネイティブの日付からアダプターへの小さな変換を検討します（アダプターが@Inputとして必要な場合）。

したがって、アダプターを使用することにした場合でも、2つの方法があります。

1. モジュール構成でアダプターを提供するのは、内部カレンダーの日付操作のみです。モデル（入力/出力）は引き続きネイティブの日付に基づいています
2. 内部使用法と入出力APIの両方に対応するアダプターを提供します。

2番目のオプションは、考えるユースケースの点でより侵襲的であり、アダプターのよく考えられたAPIが必要です。
最初のオプションは開始が簡単で、必要に応じて2番目に進化する可能性があります。

APM-266081に移動