日期选择器是前端开发中常常会用到的一个组件，而 ng2-hz-datepicker 是一个基于 Angular 框架开发的日期选择器，通过 npm 包的方式提供给开发者使用。ng2-hz-datepicker 具有简洁明了的设计，支持多种日期格式，可以方便地集成到 Angular 项目中。本文将为大家介绍如何使用 ng2-hz-datepicker。
安装
首先，我们需要在 Angular 项目中安装 ng2-hz-datepicker。使用以下命令进行安装：
npm install ng2-hz-datepicker --save
引入模块
使用 ng2-hz-datepicker 首先需要引入该模块。在你的 Angular 应用的 AppModule 中导入 NgxDatepickerModule：
-- -------------------- ---- -------
------ - ------------------- - ---- --------------------
-----------
-------- -
--------------------
--
--
------ ----- --------- -
-使用
在需要使用日期选择器的组件中，可以使用以下代码：
<ngx-datepicker [(ngModel)]="selectedDate"></ngx-datepicker>
要注意的是，ng2-hz-datepicker 在使用 ngModel 的情况下，需要在 AppModule 中导入 FormsModule 或 ReactiveFormsModule。
配置选项
ng2-hz-datepicker 还支持多种配置选项，可以根据自身需求进行调整。
日期格式
ng2-hz-datepicker 支持多种日期格式，默认为 yyyy-MM-dd：
<ngx-datepicker [(ngModel)]="selectedDate" format="yyyy-MM-dd"></ngx-datepicker>
最小日期和最大日期
可以通过 minDate 和 maxDate 设置日期的最小值和最大值，使用 Javascript 的 Date() 类型：
<ngx-datepicker [(ngModel)]="selectedDate" [minDate]="minDate" [maxDate]="maxDate"></ngx-datepicker>
this.minDate = new Date('2022-01-01');
this.maxDate = new Date();禁用日期
可以用一个函数来设置禁用的日期：
<ngx-datepicker [(ngModel)]="selectedDate" [disableDate]="disableDate"></ngx-datepicker>
disableDate(date: Date) {
return date < new Date();
}此处我们禁用了今天之前的所有日期。
显示周几
<ngx-datepicker [(ngModel)]="selectedDate" showWeekDays="true"></ngx-datepicker>
初始日期
<ngx-datepicker [(ngModel)]="selectedDate" [initialDate]="initialDate"></ngx-datepicker>
this.initialDate = new Date('2022-01-01');示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
--------------- -------------------------- ------------------- ------------------- -------------------
--------------------------- --------------------------- -------------------------------------
----
----------- -- ------------ ------
--
--
------ ----- ------------ -
------------- -------
-------- -----
-------- -----
------------ -----
------------- -
------------ - --- -------------------
------------ - --- -------
---------------- - --- -------------------
-
----------------- ----- -
------ ---- - --- -------
-
-以上示例代码演示了如何使用 ng2-hz-datepicker，并配置了日期格式、最小日期、最大日期、禁用日期、初始日期等选项。你可以在自己的 Angular 项目中按需使用 ng2-hz-datepicker。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005562f81e8991b448d318f