简介
@ngx-kit/ui-date-picker是一个基于Angular的日期选择器组件，它提供了丰富的日期选择功能和多种样式。可以很方便地在Angular应用程序中使用。
安装
在根目录的命令提示符中输入以下命令安装@ngx-kit/ui-date-picker。
npm install @ngx-kit/ui-date-picker
打开您的Angular应用程序并添加@ngx-kit/ui-date-picker模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ------------------------ - ---- -------------------------- ----------- ------------- --------------- -------- --------------- -------------------------- ---------- -------------- -- ------ ----- --------- - -
使用
在组件中添加日期选择器。
<ngx-kit-ui-date-picker></ngx-kit-ui-date-picker>
绑定日期选择器的输出值：
第一种方式：
<ngx-kit-ui-date-picker (output)="onDateOutput($event)"></ngx-kit-ui-date-picker>
export class AppComponent { onDateOutput(dateOutput: Date){ console.log(dateOutput); } }第二种方式：
@ViewChild('datePicker') datePicker; ngAfterViewInit() { this.datePicker.date$.subscribe((date) => { console.log(date); }) }
API
| Property | Type | Default | Description |
|---|---|---|---|
| format | string | null | 数据绑定格式：YYYY-MM-DD |
| rangeDates | Date[] | null | 选择日期范围，有两个日期数组（开始和结束范围）。 |
| minDate | Date | null | 可选择的最小日期。 |
| maxDate | Date | null | 可选择的最大日期。 |
| inline | boolean | false | 将日历插入DOM中。 |
| displayedMonths | number | 1 | 显示月份数量。 |
| selectType | string | 'single' | 支持单选、多选、范围选择，有三种方式：'single', 'multiple', 'range'. |
| showNearMonthDays | boolean | true | 显示靠近月份的几天。 |
| withTime | boolean | false | 显示时间，有两种方式：'select', 'clock'. |
| showSeconds | boolean | false | 现实秒。 |
| periodMinutes | number | 5 | 时间轮的分钟间隔。 |
| en | boolean | false | 是否显示英文。 |
| direction | string | 'ltr' | 日历的方向。 |
| inputClasses | string | '' | 日期选择器DOM元素的类。 |
| output | EventEmitter | null | 输出的格式：ISO/JS/TS。 |
| date$ | BehaviorSubject | null | 可监听选中日期 |
示例代码
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - --------------- - ---- -------
------ - ------ - ---- ---------
------ - --------------------------- - ---- --------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------ ------ - -------------
------ ------- - -------------------------
------ ------- - ---------------------- -----------
------ ----- - --- ------------------------- --------
------------------------ ----------- ----------------------------
---
- --------
- ------ ---- --
--
------ ------------------ -------- ---- -
--------------------------------------
-
----------------- -
-------------------------------------- -- -
------------------
--
-
-<ngx-kit-ui-date-picker
[format]="format"
[minDate]="minDate"
[maxDate]="maxDate"
(output)="onDateOutput($event)"
#datePicker>
</ngx-kit-ui-date-picker>结论
@ngx-kit/ui-date-picker是一个方便易用的日期选择器组件，提供了丰富的日期选择功能和多种样式。它可以在Angular应用程序中方便地使用，使得选择日期变得更加简单和容易。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c12