Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

feat(date/timepicker): Enhance DateAdapter to accept diffetent types for date and time

オープン
#33,276 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
35/100
issue の種類
機能追加
明瞭さ
説明が足りない
活発さ
静か
技術スタック
angular, typescript
領域
frontend

調査の方向性

まず、DateAdapter API を date picker と time picker のエントリーポイントまで追跡します。現在共有されている日付/時刻に関する前提を、要求されている日付型と時刻型の分離、無効な値の処理、addSeconds/setTime の動作と比較します。LocalDate/PlainDate と LocalTime/PlainTime を安全でないキャストなしでサポートする、後方互換性のある API 設計と実装計画ができれば完了です。

索引モデルが issue の本文から書いたものです。

説明

area: material/datepicker feature gemini-triaged P3
Feature Description

Currently DateAdapter is designed to work with instances of the same time for date and time, this is how JavaScript Date works and many other replacement libraries do too. Many libraries have noticed this is not always desirable. Java got the external Joda-Time library that became the model for the modern java.time replacement. On the JavaScript side I use js-joda, a port of the original Java Joda-Time library

Much like the new Temporal API, these libraries have aditional split representations of a date and a time, LocalDate and LocalTime and LocalDateTime when you need both without a timezone attached to it.

The Temporal API, brings these kind of types to JavaScript with PlainDate, PlainTime and PlainDateTime (better naming than the Local prefix).

DateAdapter is not designed to have a date picker with a LocalDate/PlainDate and a time picker with a LocalTime/PlainTime. Yes you can make it work but it requires a few hacks, for example the time parts on my js-joda adapter.

  isDateInstance(obj: unknown): boolean {
    return obj instanceof LocalDate || obj instanceof LocalTime;
  }

  isValid(date: LocalDate): boolean {
    return date !== INVALID_VALUE;
  }

  invalid(): LocalDate {
    return INVALID_VALUE;
  }

  override compareDate(first: LocalDate, second: LocalDate): number {
    return first.compareTo(second);
  }

  override sameDate(first: LocalDate | null, second: LocalDate | null): boolean {
    if (first != null && second != null) {
      // WORKAROUND to allow generating the list of times in the time picker
      if (first instanceof LocalTime && second instanceof LocalTime) {
        return true;
      }
      return first.equals(second);
    }
    return (first ?? null) === (second ?? null);
  }

  override setTime(_target: LocalDate, hours: number, minutes: number, seconds: number): LocalDate {
    return LocalTime.of(hours, minutes, seconds) as unknown as LocalDate;
  }

  override getHours(date: LocalDate): number {
    return (date as unknown as LocalTime).hour();
  }

  override getMinutes(date: LocalDate): number {
    return (date as unknown as LocalTime).minute();
  }

  override getSeconds(date: LocalDate): number {
    return (date as unknown as LocalTime).second();
  }

  override addSeconds(date: LocalDate, amount: number): LocalDate {
    const time = date as unknown as LocalTime;

    const remainingSeconds = SECONDS_PER_DAY - time.toSecondOfDay();
    if (remainingSeconds < amount) {
      return INVALID_VALUE;
    }

    return time.plusSeconds(amount) as unknown as LocalDate;
  }

Notice there is a lot of unsafe casting because the subclass extends DateAdapter<LocalDate>, it will have less casting if it was DateAdapter<LocalDate | LocalTime> but that would need more type checks on methods exclusively used by the date picker.

The API changes required are resumed in:

  • The adapter should be split in two or have a different type for the time. I prefer to split the adapter, because that way there could be multiple combinations of adapters for PlainDate, PlainTime, Instant (for date and for time pickers) in Temporal API for example.
  • js-joda/Temporal API has no concept of an invalid Local/Plain object, their constructors throw exceptions, So I have to hack a fake date INVALID_VALUE as an specific instance with a very big year, to use as an invalid value. So the logic that requires an invalid value should change, for example the time picker uses isValid() to stop the loop that builds the times to show.
  • addSeconds()and setTime() should not tie a time to date ever, if possible start with a start time.

Making these changes backward compatible will be a challenge, but I think it is needed to make usable the Temporal API Plain classes with the pickers.

Use Case

No response

主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 1時間
マージ済み PR(30日)
84

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

angular/components のほかの issue

angular/components の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。