在前端开发中，我们经常需要使用日历控件来方便用户选择时间或日期。@material2-extra/calendar 就是一个使用 Angular 和 Material Design 风格的开源日历控件库，它提供了很多丰富的功能和样式，可以帮助我们快速构建动态的日期选择器。
安装
在开始使用 @material2-extra/calendar 之前，我们首先需要把它安装到我们的项目中。可以通过以下命令来安装：
npm install @material2-extra/calendar
基本使用
安装好后，我们需要在 Angular 的 module 中引入 CalendarModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- ----------------------------
-----------
-------- -
-------------
--------------
--
------------- ---
-------- -
--------------
-
--
------ ----- ------------ - -接着我们就可以在组件中使用日历控件了：
<mat-calendar></mat-calendar>
高级用法
@material2-extra/calendar 提供了非常多的选项和事件来满足各种需求。下面我们会介绍一些常用的高级功能。
日期范围选择
有时候我们需要选择一个日期范围，比如选择某个月份或者一段时间段。@material2-extra/calendar 提供了相应的组件 MatRangeDatepicker 和 MatRangeDatePickerInput。
首先我们需要在 module 中引入 MatRangeDatepickerModule 和 MatRangeDatePickerInputModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- ----------------------------
------ - ------------------------- ----------------------------- - ---- ----------------------------
-----------
-------- -
-------------
---------------
-------------------------
-----------------------------
--
------------- ---
-------- -
---------------
-------------------------
-----------------------------
-
--
------ ----- ------------ - -接着我们可以在组件中使用 MatRangeDatePickerInput 和 MatRangeDatepicker：
<mat-form-field>
<mat-range-datepicker #picker [from]="_start" [to]="_end" (rangeSelected)="rangeSelected($event)" (dateChange)="dateChange($event)">
<input type="text" matInput [matRangeDatePicker]="picker" placeholder="Select a date range">
</mat-range-datepicker>
</mat-form-field>日期选择事件
@material2-extra/calendar 提供了两个事件来响应日期的选择，分别是 dateSelected 和 rangeSelected。它们分别返回一个 Moment 对象或者一个 Moment[] 数组。
下面是一个响应 dateSelected 事件的示例：
<mat-calendar (dateSelected)="dateSelected($event)"></mat-calendar>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -- ------ ---- ---------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------------------ --------------- ---- -
------------------
-
-自定义日期单元格样式
有时候我们需要根据具体日期来自定义单元格的样式，比如标记某个日期为重要日期。@material2-extra/calendar 提供了一个 getCellClass 方法来帮助我们实现这个需求。
<mat-calendar [getCellClass]="getCellClass"></mat-calendar>
-- -------------------- ---- -------
------ - -- ------ ---- ---------
------------------ --------------- ------ -
-- ---------------------- ------- -
------ --------
-
------ ---
-自定义日期单元格内容
除了自定义样式外，我们还可以自定义单元格的内容。可以通过设置 headerTemplate 和 cellTemplate 来实现自定义。
-- -------------------- ---- -------
------------- --------------------------------- ---------------------------------------------
------------ --------------- ---------
-- ----------------- ------ --
--------------
------------ ------------- ---------
---- ---------------------
---- --------------- ---------------- --------
---- ---------------------------
------
--------------总结
@material2-extra/calendar 是一个非常好用的日历控件库，它具有丰富的功能和美观的 Material Design 风格。本篇文章介绍了 @material2-extra/calendar 的基本使用方法和一些高级用法，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446ce