问题描述
有什么方法可以将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
接口的类: NativeDateAdapter
和 MomentDateAdapter
.他们分别告诉 MatDatepicker
如何使用javascript本机 Date
对象和 moment
对象.我将讨论javascript本机 Date
对象,但是相同的原理适用于任何日期表示形式.javascript Date
对象有一些限制(例如,无法告诉它您想如何显示日期).长话短说:只需扩展提供的Material NativeDateAdapter
并覆盖所需的功能.您要执行的操作显示在此 stackblitz演示中(基本上,您要覆盖 NativeDateAdapter
的功能: getFirstDayOfWeek:()=>数字
),此后我将给出一些概述.
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)=>字符串
函数可以实现/覆盖,该函数允许您定义从日历弹出窗口中选择日期字符串后必须在输入中显示的格式.
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有一个要使用的自定义日期适配器(请查看provider数组).在这种情况下,我构建了此示例以与巴西葡萄牙语一起使用(请查看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在星期一的星期开始的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!