ng2-simple-datepicker 是一个 Angular 2+ 的日历选择器组件，它可以方便地为用户提供日历选择功能。本篇文章将介绍该 npm 包的使用方法，详细讲解其组件结构和相关 API，帮助读者快速上手。
安装 ng2-simple-datepicker
使用 npm 包管理工具，可以很容易地安装 ng2-simple-datepicker：
npm install ng2-simple-datepicker --save
引入 ng2-simple-datepicker
在使用 ng2-simple-datepicker 之前，需要在应用的 NgModule 中引入该组件。假设我们的应用名称为 MyApp，那么可以将它引入到 AppModule 中：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ------------------------- - ---- ------------------------ ----------- ------------- --------------- -------- --------------- --------------------------- ---------- -------------- -- ------ ----- --------- --
然后在 AppComponent 中，我们可以通过 ng2-simple-datepicker 标签来使用这个组件：
<ng2-simple-datepicker></ng2-simple-datepicker>
组件结构
ng2-simple-datepicker 组件包含一个日期选择框和一个日历选择框。日期选择框提供了用户选择日期的方式，日历选择框则展示了可选的日期和月份。
为方便阅读，以下将日期选择框和日历选择框分别讲解：
日期选择框
日期选择框是一个 <input> 标签，提供了用户直接输入或通过日历选择日期的方式。在 ng2-simple-datepicker 组件中，日期选择框的相关属性和事件如下：
属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| class | string | （可选）自定义样式 | |
| dateFormat | string | （可选）指定日期的格式，如 YYYY-MM-DD（非常重要，否则组件无法工作） |
|
| minDate | Date | （可选）可选的最小日期 | |
| maxDate | Date | （可选）可选的最大日期 | |
| placeholder | string | （可选）默认文本提示信息 | |
| disabled | boolean | false | （可选）控制日期选择框是否可用 |
| required | boolean | false | （可选）控制是否为必填项 |
| value | Date | （必选）日期选择框的值，必须是合法的 Date 对象，否则组件无法工作。该属性也可以通过数据绑定方式进行初始化。 | |
| showOnFocus | boolean | true | （可选）是否在日期选择框获得焦点时自动展开日历，非常适合移动设备上的使用。 |
| onChangeDate | function | （可选）当选择日期时的回调函数 |
事件
| 名称 | 参数类型 | 说明 |
|---|---|---|
| onChangeDate | Date | （可选）当选择日期时的回调函数 |
| onFocus | void | （可选）当日期选择框获得焦点时的回调函数 |
| onBlur | void | （可选）当日期选择框失去焦点时的回调函数 |
示例代码
<ng2-simple-datepicker [(value)]="date" placeholder="请输入日期"></ng2-simple-datepicker>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---------------------- ---------------- --------------------------------------------
-
--
------ ----- ------------ -
----- -----
-日历选择框
日历选择框是一个类似于传统日历的表格，展示了可选的日期和月份，用户可以通过点击单元格来选择日期。在 ng2-simple-datepicker 组件中，日历选择框的相关属性和事件如下：
属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| minDate | Date | （可选）可选的最小日期，如果选择了限制区间以外的日期，那么会返回原来的日期。 | |
| maxDate | Date | （可选）可选的最大日期，同上。 | |
| startDate | Date | 当月第一天 | （必选）日历选择框所在的日期，必须是合法的 Date 对象，否则组件无法工作。 |
| showTodayButton | boolean | true | （可选）是否在日历选择框中展示“今天”按钮。 |
| showClearButton | boolean | true | （可选）是否在日历选择框中展示“清除”按钮。 |
| showCloseButton | boolean | true | （可选）是否在日历选择框中展示“关闭”按钮。 |
| showMonthSelector | boolean | true | （可选）是否在日历选择框中展示月份选择器。 |
| showYearSelector | boolean | true | （可选）是否在日历选择框中展示年份选择器。 |
| isDisabled | function | （可选）自定义禁用的日期规则，返回值为 true 则禁用该日期。 |
事件
| 名称 | 参数类型 | 说明 |
|---|---|---|
| onDateSelected | Date | （可选）当选择日期时的回调函数 |
| onMonthSelected | Date | （可选）当选择月份时的回调函数 |
| onYearSelected | number | （可选）当选择年份时的回调函数 |
| onTodaySelected | void | （可选）当选择了“今天”按钮时的回调函数 |
| onClearSelected | void | （可选）当选择了“清除”按钮时的回调函数 |
| onCloseSelected | void | （可选）当选择了“关闭”按钮时的回调函数 |
| onPrevMonth | Date | （可选）当切换到上一个月时的回调函数 |
| onNextMonth | Date | （可选）当切换到下一个月时的回调函数 |
| onPrevYear | number | （可选）当切换到上一年时的回调函数 |
| onNextYear | number | （可选）当切换到下一年时的回调函数 |
| onDisabledDay | Date | （可选）当日期被禁用时的回调函数 |
示例代码
<ng2-simple-datepicker [(value)]="date" placeholder="请输入日期"></ng2-simple-datepicker>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---------------------- ---------------- --------------------------------------------
-
--
------ ----- ------------ -
----- -----
-总结
本篇文章介绍了 npm 包 ng2-simple-datepicker 的使用方法，详细讲解了其组件结构和相关 API，以及示例代码。希望本文对读者有所帮助，能够快速掌握和使用该组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a4981e8991b448d7e9a