MatDatePicker 从周一开始一周

Question

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

Answer 1

您必须构建一个自定义的

DateAdapter

。自定义 DateAdapter 是一个实现

DateAdapter

接口的类（它实际上是一个应该扩展的抽象类）。它必须有一堆预定义的方法实现，并且必须注册为

useClass

提供者。DateAdapter

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

Material 提供了四个扩展

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

 抽象类的类：

DateAdapter

、

NativeDateAdapter

、

MomentDateAdapter

 和 

LuxonDateAdapter

。它们分别告诉 

DateFnsAdapter 如何使用 javascript 原生

MatDatepicker

对象和

Date

对象。我将讨论 javascript 原生

moment

对象，但相同的原则适用于任何日期表示。 javascript

Date

对象有一些限制（例如，无法告诉它您想要如何呈现日期）。长话短说：只需扩展提供的材质

Date

并覆盖您需要的方法。您想要做的事情在这个

stackblitz demo

中显示（基本上您想要重写 NativeDateAdapter 的方法：

NativeDateAdapter

），之后我将给出一些概述。getFirstDayOfWeek : () => number

在演示中，您将看到一个

getFirstDayOfWeek(): number {
  return 1;
}

。这是您应该扩展

custom-date-adapter.ts

的地方，覆盖两个函数：NativeDateAdapter

第一个函数的意思是：a) 除其他外，根据用户在日历中选择的内容创建一个 

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

对象，b) 解析输入中键入的内容到

Date

对象。第二个函数 (

Date

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

还有一个有趣的

getFirstDayOfWeek

函数可供实现/覆盖，它允许您定义从日历弹出窗口中选择日期字符串后必须在输入中显示的格式。

在演示中，在 main.ts 中，您必须告诉 Angular 有一个要使用的自定义日期适配器（查看providers 数组）。在本例中，我构建了此演示以使用巴西葡萄牙语（请查看 main.ts 构造函数，了解

format: (date: Date, displayFormat: Object) => string

）。在这里，我们将日期表示为

date.setLocale('pt-BR')

，知道星期一 == 葡萄牙语中的“Segunda-Feira”。 ：D另一个预构建的适配器（

dd/MM/yyy

，基于

MomentDateAdapter

而不仅仅是本机

Moment.js

对象），在某些情况下，可以让您免于构建自定义日期适配器，因为

Date

已经处理区域设置以更有效的方式）。希望有帮助。

Answer 2

Moment.js

并希望从星期一而不是星期日开始一周。

app.module.ts

<ngx-mat-datetime-picker>

自定义.日期.适配器.ts

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

Answer 3

如果您的项目中有多个子模块，其中一个使用 Material DatePicker，请确保子模块中的

none

导入

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


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

。该模块提供了自己的

MatNativeDateModule

，它可能会覆盖

DateAdapter

中您自己的

DateAdapter

。

Answer 4

https://stackoverflow.com/a/45020144/6052406

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

app.module.ts

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

import { NativeDateAdapter } from '@angular/material/core';

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

添加进口：

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

添加提供商：

MatDatepickerModule
MatNativeDateModule

瞧！

Answer 5

luxon-date-adapter

它就像：

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

所有可用选项：

https://github.com/angular/components/blob/main/src/material-luxon-adapter/adapter/luxon-date-adapter.ts#L18

Answer 6

providers: [
    { provide: DateAdapter, useValue: new LuxonDateAdapter('en-GB', {
        firstDayOfWeek: 1, 
        useUtc: true 
    }) },
]