Question

有没有办法配置md-datepicker在星期一开始一周？默认情况下，它从星期日开始，没有任何规范可以改变这一点。

Answer 1

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

providers: [{provide: DateAdapter, useClass: CustomDateAdapter }]

日期适配器告诉datepicker诸如如何在内部存储日期/时间，如何在输入中显示它们以及其他内容。

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

第一个函数意味着1）除了其他之外，从用户在日历中选择的内容创建一个Date对象，以及2）解析输入到Date对象的内容。

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

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

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

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

希望它有所帮助。

Answer 2

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

app.module.ts

providers:[{ provide: NgxMatDateAdapter, useClass: CustomDateAdapter}]

custom.date.adapter.ts

import { NgxMatNativeDateAdapter } from '@angular-material-components/datetime-picker';

export class CustomDateAdapter extends NgxMatNativeDateAdapter {
  getFirstDayOfWeek(): number {
     return 1;
   }
}

Answer 3

@jpavel需要更多帮助。

我试了两次，两次都崩溃了。控制台日志中的大量错误，输出面板没有显示任何内容（仅＃34;加载Angular Material App ...＆＃34;）。

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

providers: [{provide: DateAdapter, useClass: CustomDateAdapter }]

到我的核心模块。似乎没有任何事情发生。我输入并粘贴到输入（日期）字段，并且都没有调用parse（）或format（）（我向它添加了console.log（））。

MatDatePicker周一开始一周

3 个答案:

app.module.ts

custom.date.adapter.ts