本文介绍了MatDatePicker 从星期一开始一周的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有什么方法可以将 md-datepicker 配置为从星期一开始一周?默认情况下,它从星期日开始,并且没有任何说明可以更改此设置.

There is any way to configure the md-datepicker to start week on monday? By default it start on Sunday and there isn't any specification who to change this.

推荐答案

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

You have to build a custom DateAdapter. A custom DateAdapter is a class which implements the DateAdapter interface. It must have a bunch of predefined function implementations and have to be registered as a useClass for the DateAdapter provider.

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

日期适配器告诉日期选择器诸如如何在内部存储日期/时间、如何在输入中显示它们等信息.

The date adapter tells the datepicker things like how to store dates/times internally, how to present them in the input and other things.

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

Material provided two classes which implement the DateAdapter interface: NativeDateAdapter and MomentDateAdapter. They tell MatDatepicker how to work with the javascript native Date object and moment object, respectively. I'll talk about the javascript native Date object, but the same principles apply to any date representation. The javascript Date object has some limitations (for example, it's not possible to tell it how do you want to present dates). The long story short: just extends the Material provided NativeDateAdapter and override the functions you need. What you want to do is shown in this stackblitz demo (basically you want to override a function of the NativeDateAdapter: getFirstDayOfWeek : () => number) and I'll give a little overview afterwards.

getFirstDayOfWeek(): number {
  return 1;
}

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

In the demo, you will see a custom-date-adapter.ts. This is where you should extended the NativeDateAdapter, overriding two functions:

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

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

The first function meant to a) among other things, create a Date object from what the user chose in the calendar, and b) parse what is typed in the input to a Date object.

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

The second function (getFirstDayOfWeek) tells the calendar to start in a specifc week day (0 - Sunday, 1 - Monday, 2 - Tuesday ...).

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

Also there's an interesting format: (date: Date, displayFormat: Object) => string function available to be implemented/overriden that allows you to define the format the date string must be shown in the input after being selected from the calendar popup.

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

In the demo, in the main.ts you must tell Angular that there is a custom date adapter to use (look at the providers array). In this case, I built this demo to work with Brazilian Portuguese (look at the main.ts constructor, for the date.setLocale('pt-BR')). Over here, we present dates as dd/MM/yyy, knowing Monday == "Segunda-Feira" in portuguese. :D

另一个预构建的适配器(MomentDateAdapter,基于 Moment.js 而不仅仅是原生的 Date 对象),在某些情况下,您无需构建自定义日期适配器,因为 Moment.js 已经以更有效的方式处理语言环境).

The other pre-built adapter (MomentDateAdapter, based on Moment.js instead of just the native Date object) that, in some cases, saves you from building a custom date adapter, as Moment.js already deals with locales in a more efficient way).

希望有帮助.

这篇关于MatDatePicker 从星期一开始一周的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 03:22
查看更多