MatDatePicker在星期一开始一周



有什么方法可以将md日期选择器配置为从星期一开始一周?默认情况下,它从星期日开始,没有任何规范可以更改它。

您必须构建一个自定义DateAdapter。自定义 DateAdapter 是一个实现DateAdapter接口的类(它实际上是一个应该扩展的抽象类(。它必须具有一堆预定义的函数实现,并且必须注册为DateAdapter提供程序的useClass

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

日期适配器告诉日期选择器一些事情,比如如何在内部存储日期/时间,如何在输入中呈现它们等等。

材料提供了四个类,扩展了DateAdapter抽象类:NativeDateAdapterMomentDateAdapterLuxonDateAdapterDateFnsAdapter。它们分别告诉MatDatepicker如何使用 javascript 本机Date对象和moment对象。我将讨论 javascript 原生Date对象,但相同的原则适用于任何日期表示。javascriptDate对象有一些限制(例如,无法告诉它您希望如何显示日期(。长话短说:只需扩展NativeDateAdapter提供的材料并覆盖您需要的功能。你想做什么在这个堆栈闪电战演示中展示(基本上你想覆盖NativeDateAdaptergetFirstDayOfWeek : () => 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有一个自定义日期适配器可以使用(查看提供程序数组(。在这种情况下,我构建了这个演示来使用巴西葡萄牙语(查看main.ts构造函数,date.setLocale('pt-BR')(。在这里,我们将日期显示为dd/MM/yyy,知道星期一 == 葡萄牙语中的"Segunda-Feira"。:D

另一个预构建的适配器(MomentDateAdapter,基于Moment.js而不仅仅是本机Date对象(,在某些情况下,可以使您免于构建自定义日期适配器,因为Moment.js已经以更有效的方式处理区域设置(。

希望对您有所帮助。

如果有人使用<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;
}
}

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

如果项目中有多个子模块,其中一个子模块使用材质日期选取器,请确保没有任何子模块导入MatNativeDateModule。该模块提供了自己的DateAdapter,可能会从app.module.ts覆盖您自己的DateAdapter

基于 @julianobrasil https://stackoverflow.com/a/45020144/6052406

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

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

在 app.module.ts 中,导入(至少(以下内容:

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

添加导入:

MatDatepickerModule
MatNativeDateModule

添加提供程序:

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

瞧!

对于luxon-date-adapter来说,它就像:

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

所有可用选项:https://github.com/angular/components/blob/main/src/material-luxon-adapter/adapter/luxon-date-adapter.ts#L18

最新更新