MatDatePicker 从星期一开始一周

Posted 2023-02-18

【中文标题】MatDatePicker 从星期一开始一周

【英文标题】：MatDatePicker start week on monday

【发布时间】：2017-12-14 14:48:45

【问题描述】：

有什么方法可以将 md-datepicker 配置为从星期一开始一周？默认情况下它从星期日开始，并且没有任何规范可以更改此设置。

【参考方案1】：

你必须建立一个自定义的DateAdapter。自定义 DateAdapter 是一个实现 DateAdapter 接口的类。它必须有一堆预定义的函数实现，并且必须为DateAdapter 提供程序注册为useClass。

providers: [provide: DateAdapter, useClass: CustomDateAdapter ]

日期适配器告诉日期选择器诸如如何在内部存储日期/时间、如何在输入中显示它们以及其他事情。

Material 提供了两个实现DateAdapter 接口的类：NativeDateAdapter 和MomentDateAdapter。它们分别告诉MatDatepicker 如何使用javascript 原生Date 对象和moment 对象。我将讨论 JavaScript 原生 Date 对象，但相同的原则适用于任何日期表示。 javascript Date 对象有一些限制（例如，无法告诉它您想如何显示日期）。长话短说：只需扩展 NativeDateAdapter 提供的材料并覆盖您需要的功能。你想要做的在这个stackblitz demo中显示（基本上你想覆盖NativeDateAdapter的一个函数：getFirstDayOfWeek : () => number），之后我会做一个小概述。

getFirstDayOfWeek(): number 
  return 1;

在演示中，您将看到custom-date-adapter.ts。这是您应该扩展 NativeDateAdapter 的地方，覆盖两个函数：

1) parse: (value: any) => Date | null
2) getFirstDayOfWeek: ()=> number

第一个函数意味着 a) 除其他外，根据用户在日历中选择的内容创建一个 Date 对象，b) 将输入中的内容解析为 Date 对象。

第二个函数 (getFirstDayOfWeek) 告诉日历从特定的工作日开始（0 - 星期日，1 - 星期一，2 - 星期二...）。

还有一个有趣的format: (date: Date, displayFormat: Object) => string 函数可供实现/覆盖，它允许您定义从日历弹出窗口中选择日期字符串后必须在输入中显示的格式。

在演示中，您必须在 main.ts 中告诉 Angular 有一个自定义日期适配器可供使用（查看 providers 数组）。在这种情况下，我构建了这个演示来使用巴西葡萄牙语（查看 main.ts 构造函数，对于 date.setLocale('pt-BR')）。在这里，我们将日期显示为dd/MM/yyy，在葡萄牙语中知道Monday == "Segunda-Feira"。 :D

另一个预构建的适配器（MomentDateAdapter，基于 Moment.js 而不仅仅是本机 Date 对象），在某些情况下，可以避免构建自定义日期适配器，因为 Moment.js 已经处理以更有效的方式使用语言环境）。

希望对你有帮助。

【讨论】：

这对我不起作用。我的日期选择器是可注入的，但从未实例化：***.com/questions/65104948/…

【参考方案2】：

@jpavel 需要更多帮助。

我尝试了你的两个 plunk，但都崩溃了。控制台日志中有很多错误，输出面板什么也没有显示（只有“正在加载 Angular 材质应用程序...”）。

我尝试采用您的代码，并添加了

providers: [provide: DateAdapter, useClass: CustomDateAdapter ]

到我的核心模块。似乎什么都没有发生。我在输入（日期）字段中键入并粘贴，但没有调用 parse() 或 format()（我在其中添加了 console.log()）。

【讨论】：

我发现了可以做什么，但不明白为什么。正如我所说，我将提供程序添加到由 App Module 导入的 Core Module 中。我想它会像服务一样提供给整个应用程序。怀疑可能不是这种情况，我也将提供对象添加到我的延迟加载功能模块中，然后调用自定义适配器。但为什么？将其添加到核心模块是否就足够了？

很抱歉。我已经修好了。

【参考方案3】：

如果有人使用<ngx-mat-datetime-picker> 并希望从星期一而不是星期日开始一周。

app.module.ts

providers:[ provide: NgxMatDateAdapter, useClass: CustomDateAdapter]

custom.date.adapter.ts

import  NgxMatNativeDateAdapter  from '@angular-material-components/datetime-picker';
import  Injectable  from "@angular/core";


@Injectable()
export class CustomDateAdapter extends NgxMatNativeDateAdapter 
  getFirstDayOfWeek(): number 
     return 1;
   

【讨论】：

不要忘记添加@Injectable() 注释以避免将来出现警告。

【参考方案4】：

如果@julianobrasil 的解决方案对某人不起作用，您可以试试这个：

如果您的项目中有多个子模块，其中一个使用 Material DatePicker，请确保没有一个子模块导入 MatNativeDateModule。这个模块提供了自己的DateAdapter，它可能会从app.module.ts覆盖你自己的DateAdapter。