简介
ng2-datepicker2 是一个 Angular2 的日期选择器组件，它可以用于快速生成基于日期的 UI 元素。该组件由 npm 社区开发并维护，通过 npm 包管理工具可以非常方便地引入到我们的项目中。
在本文中，我们将介绍如何通过 npm 包管理工具引入和使用 ng2-datepicker2 组件，包括向组件传递参数及使用事件等操作。
安装
首先，我们需要使用 npm 包管理工具来安装 ng2-datepicker2 组件。在命令行中，进入项目根目录，执行以下命令：
npm install ng2-datepicker2 --save
上面这个命令会自动将 ng2-datepicker2 组件添加到项目的 package.json 文件中，并将组件保存到 npm 的本地仓库。此外，--save 参数可以将组件添加到项目的依赖关系中，以便在后续部署和构建过程中使用。
使用
经过安装，我们可以通过在组件中引入 Ng2DatepickerModule 模块来使用该组件。
-- -------------------- ---- -------
------ - ------------------- - ---- ------------------
-----------
-------- -
--------------
-------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -在 HTML 文件中，我们可以使用 ng2-datepicker2 组件生成日期选择器元素。
<ng2-datepicker [(ngModel)]="myDateParam"></ng2-datepicker>
上面这段代码创建了一个日期选择器元素，并将其双向绑定到 myDateParam 变量，即所选日期的值会自动写入该变量中。我们也可以通过修改组件中的 input 参数来控制日期的格式、初始值等。
<ng2-datepicker [options]="{dateFormat: 'yyyy-mm-dd', initialValue: '2019-01-01'}" [(ngModel)]="myDateParam"></ng2-datepicker>在上面这个日期选择器中，我们指定了日期的格式为 "yyyy-mm-dd"，并将其初始值设为 "2019-01-01"。
事件
除双向绑定外，ng2-datepicker2 组件还支持多个事件，以便我们对日期选择器进行更细粒度的控制，比如在用户选择日期后执行某些操作。
<ng2-datepicker (selected)="onDateSelected($event)" [(ngModel)]="myDateParam"></ng2-datepicker>
在上面这个日期选择器中，我们绑定了 selected 事件，并将其处理函数设置为 onDateSelected($event)。这个函数会在用户选择某个日期后自动调用，并将所选日期作为 $event 参数传入。
onDateSelected(date: Date) {
console.log(`User selected date: ${date}`);
}在这个函数中，我们可以对所选日期进行各种操作，比如将其写入后端数据库、刷新页面等。
示例代码
最后，附上一份使用 ng2-datepicker2 组件的示例代码。
-- -------------------- ---- -------
-- -------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------- - ---- ------------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
-------------------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- - -
-- ------------------
----------- -- -----------
--------------- ------------------------- ----------------------- ------------- ------------- -------------- -----------------------------------------------------
------ --------- -- ----------- ------
-- ----------------
------ - --------- - ---- ----------------
------------
--------- ---------
------------ -----------------------
---------- - --------------------- -
--
------ ----- ------------ -
------------ -----
-------------------- ----- -
----------------- -------- ----- ----------
-
-在这个示例代码中，我们创建了一个基于 ng2-datepicker2 组件的日期选择器，并通过双向绑定和事件来控制日期的读写和操作。你可以参考这个示例代码来进一步了解如何使用 ng2-datepicker2 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553a381e8991b448d0de5