Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

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

未关闭
#33,276 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
5/5
预计耗时
一周以上
新手友好度
35/100
Issue 类型
功能
描述清晰度
需要澄清
活跃度
冷清
技术栈
angular, typescript
领域
frontend

调研方向

首先跟踪 DateAdapter API 到 date picker 和 time picker 的入口点。将当前共享的日期/时间假设与所请求的独立日期类型和时间类型、无效值处理以及 addSeconds/setTime 行为进行比较。完成的标准是制定出向后兼容的 API 设计和实现计划,支持 LocalDate/PlainDate 与 LocalTime/PlainTime,同时不使用不安全的强制类型转换。

由索引模型根据 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 小时
30 天内合并 PR
84

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

angular/components 的其他 Issue

查看 angular/components 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。