在 Angular2 项目中，展示日期和时间是很常见的需求。 vk-custom-angular2-datetimepicker 是一款基于 Angular2 的 npm 包，能够轻松实现日期时间选择器的功能。本文将介绍如何安装和使用 vk-custom-angular2-datetimepicker。
安装
在项目根目录下，运行以下命令进行安装：
npm install vk-custom-angular2-datetimepicker --save
引入模块
在使用之前，需要将 VkDatetimePickerModule 模块引入到你的项目中。在你的 app.module.ts 中添加以下代码：
-- -------------------- ---- -------
------ - ---------------------- - ---- ------------------------------------
-----------
-------- -
---
----------------------
--
---
--
------ ----- --------- - -使用
在需要展示日期和时间的组件中，使用以下代码进行调用：
<ngx-datetime-picker [(ngModel)]="myDate" [pickerType]="'both'" [showSeconds]="true"></ngx-datetime-picker>
- [(ngModel)]：双向绑定值，即在选择器中选择后会自动更新。
- [pickerType]：可选值为 date, time 和 both。date 表示只选日期，time 表示只选时间，both 表示全选。
- [showSeconds]：是否显示秒数。
示例：
<input type="text" [(ngModel)]="myDate"> <ngx-datetime-picker [(ngModel)]="myDate" [pickerType]="'both'" [showSeconds]="true"></ngx-datetime-picker>
渲染自定义控件
如果需要按自己的样式渲染日期时间选择器的 UI，可以使用下列方法。
在组件中，添加以下代码：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - ----------- - ---- ------------------------------------
------------
---
--
------ ----- ------------ -
----------------------- - ------- ----- --
------- ------------- ------------
--------------- - -
------- ------ ------- -- ----------------- --------- - - -----
--
----------------- -
---------------------------------------------
-
-在模板中，添加以下代码：
<ngx-datetime-picker [(ngModel)]="myDate" [pickerType]="'both'" [showSeconds]="true"></ngx-datetime-picker>
总结
vk-custom-angular2-datetimepicker 是基于 Angular2 的 npm 包，非常方便地实现了日期时间选择器的功能。通过本文的介绍，你可以轻松地了解如何安装和使用 vk-custom-angular2-datetimepicker，并可以在项目中方便地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731681e8991b448e945a