MatDatePicker从星期一开始的一周

Question

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

Answer 1

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

应用程序模块.ts

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

自定义日期适配器.ts

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


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

Answer 2

您必须建立一个自定义DateAdapter。自定义DateAdapter是实现DateAdapter接口的类。它必须有一堆预定义的功能实现，并有注册为一个useClass为DateAdapter供应商。

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

日期适配器告诉日期选择器类似的东西，例如如何在内部存储日期/时间，如何在输入中显示日期和其他内容。

Material提供了两个实现DateAdapter接口的类：NativeDateAdapter和MomentDateAdapter。他们告诉MatDatepicker如何分别使用javascript本机Date对象和momentobject。我将讨论javascript本机Date对象，但是相同的原理适用于任何日期表示形式。javascript Date对象有一些限制（例如，无法告诉它您想如何显示日期）。长话短说：只是扩展提供的材料NativeDateAdapter并覆盖您需要的功能。要在此显示做什么stackblitz演示（基本上你要重写的函数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有一个要使用的自定义日期适配器（请查看provider数组）。在这种情况下，我构建了此演示文稿以与巴西葡萄牙语一起使用（请参阅main.ts构造函数date.setLocale('pt-BR')）。在这里，我们将日期表示为dd/MM/yyy，知道葡萄牙语=“ Segunda-Feira”（星期一）。：D

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

希望能帮助到你。

Answer 3

基于@julianobrasil /sf/answers/3151410111/

\n

创建类 custom-date-adapter.ts 来覆盖 getFirstDayOfWeek()

\n

import { NativeDateAdapter } from \'@angular/material/core\';\n\nexport class CustomDateAdapter extends NativeDateAdapter {\n    override getFirstDayOfWeek(): number {\n        return 1;\n    }\n}\n

\n

在 app.module.ts 中，导入（至少）以下内容：

\n

import { MatDatepickerModule } from \'@angular/material/datepicker\';\nimport { CustomDateAdapter } from \'./custom-date-adapter\';\nimport { DateAdapter, MatNativeDateModule } from \'@angular/material/core\';\n

\n

添加导入：

\n

MatDatepickerModule\nMatNativeDateModule\n

\n

添加提供商：

\n

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

\n

瞧\xc3\xa1！

\n

Answer 4

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

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