这篇文章将向您介绍如何使用 angular-mat-datepicker, 一个可以帮助您快速创建 Material Design 风格日期选择器的 npm 包。
安装
运行以下命令可以在您的项目中安装该 npm 包：
npm install angular-mat-datepicker --save
导入
您需要在您的 app.module.ts 中导入以下模块：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ ------------------- - ---- -----------------
------ - ----------------------- - ---- ---------------------------------------
------ - -------------- - ---- --------------------------
------ - ------------------ - ---- -------------------------------
------ - ------------------- - ---- -------------------------------
------ - ------------------- - ---- -----------------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
-------------
--
-------- -
--------------
------------
--------------------
------------------------
---------------
-------------------
--------------------
-------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用
在您的组件中，您需要导入 Moment 模块和 MAT_DATE_FORMATS 常量，以及在您需要使用日期选择器的 HTML 文件中插入组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------ - ---- ---------
------ - -- ------- ---- ---------
------ - ---------------- - ---- -------------------------
------ - ----------------------- - ---- -------------------------------
----- ------ - --------
------ ----- ---------- - -
------ -
---------- -----
--
-------- -
---------- -------------
--------------- ---- ------
-------------- -----
------------------- ----- ------
--
--
------------
--------- -----------
------------ -----------------------
---------- -------------------------
---------- -
- -------- ----------------- --------- ---------- --
--
--
------ ----- ------------ -
---- - --- ----------------------
-------------- ------- ------ -------------------------------- -
--------------------- -----------------
-
-在 HTML 文件中，您应该像下面这样输入 mat-datepicker 标签：
<form>
<mat-form-field>
<input matInput [matDatepicker]="picker" [formControl]="date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker (closed)="addEvent('pickerClosed', $event)" (opened)="addEvent('pickerOpened', $event)"></mat-datepicker>
</mat-form-field>
</form>这就是 angular-mat-datepicker 的使用方法。祝您享受 Material Design 效果的日期选择器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e581e8991b448e0819