ng2-daterange-picker-bargreen 是一个用于 Angular2+ 的日期选择器组件。它可以帮助你轻松、快速地实现日期选择器的功能。在本篇文章中，我们将会详细介绍如何使用它。
安装
你可以通过 npm 包管理器来安装 ng2-daterange-picker-bargreen。在终端中运行如下命令：
npm install ng2-daterange-picker-bargreen --save
安装完成后，你需要在你的模块中引入日期选择器模块以及它所依赖的模块：
-- -------------------- ---- -------
------ ---------- ---- ----------------
------ --------------- ---- ----------------------------
------ ------------- ---- -----------------
------ -------------------------- ---- --------------------------------
-----------
-------- --------------- ------------ --------------------------
------------- ---------------
---------- --------------
--
------ ----- --------- --使用
ng2-daterange-picker-bargreen 的组件名为 dual-calendar。你可以在 HTML 中使用它，并指定日期选择器所需的参数：
<dual-calendar [options]="datePickerSettings"
[startDate]="datePickerStart"
[endDate]="datePickerEnd"
(dateSelected)="onDateSelected($event)">
</dual-calendar>然后，在你的组件中设置日期选择器的参数，绑定起始日期和结束日期以及处理日期选择器返回的事件：
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ - -- ------ ---- ---------
------------
--------- ---------
------------ ----------------------
--
------ ----- ------------ -
------------------ - -
------- --------
------------ --------
---------- ------
----------- --------------
---------- -----
------- -
----- ------------------------- -----------------------
----- --------------------- ----------------------- -------------------- ----------------------
--- - --- --------------------- ----------------------- -----------------------
--- -- --- ---------------------- ----------------------- -----------------------
----- --------------------------- -------------------------
----- --------------------- -------------------------- -------------------- ------------------------
-
--
---------------- --- - --------------------- --------
-------------- --- - ---------
--------------------- ---- -
--------------------- ---- -------- -------
-
-参数描述
options: (object) 日期选择器的选项配置。locale: (string) 本地化语言，默认为'en'。startDateId: (string) 开始日期的 ID。endDateId: (string) 结束日期的 ID。dateFormat: (string) 日期格式。autoApply: (boolean) 是否自动应用日期范围。ranges: (object) 预定义日期范围选项。
startDate: 开始日期。endDate: 结束日期。dateSelected: (function) 当用户选择日期时触发的回调函数。
结语
ng2-daterange-picker-bargreen 是一个高效、易于使用的日期选择器组件。通过本文，相信你已经了解了如何使用它，并能够快速地为你的 Angular2+ 应用实现日期选择器的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600579e781e8991b448eb3db