@libs-ui/components-datetime-picker 0.2.355-9 → 0.2.356-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +243 -2
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -1,3 +1,244 @@
|
|
|
1
|
-
# datetime-picker
|
|
1
|
+
# @libs-ui/components-datetime-picker
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Component chọn ngày tháng với hỗ trợ single date, date range, time picker và custom ranges
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
7
|
+
`LibsUiComponentsDatetimePickerComponent` là một standalone Angular component cho phép người dùng chọn ngày tháng với nhiều chế độ khác nhau: single date, date range, có hoặc không có time picker.
|
|
8
|
+
|
|
9
|
+
### Tính năng
|
|
10
|
+
|
|
11
|
+
- ✅ Single Date Picker
|
|
12
|
+
- ✅ Date Range Picker
|
|
13
|
+
- ✅ Time Picker (có thể bật/tắt)
|
|
14
|
+
- ✅ Quick Ranges (hôm nay, tuần này, tháng này, ...)
|
|
15
|
+
- ✅ Custom Ranges
|
|
16
|
+
- ✅ Min/Max Date validation
|
|
17
|
+
- ✅ Required validation
|
|
18
|
+
- ✅ Localization support
|
|
19
|
+
- ✅ Standalone Component
|
|
20
|
+
- ✅ OnPush Change Detection
|
|
21
|
+
- ✅ Two-way binding với model signals
|
|
22
|
+
|
|
23
|
+
## Khi nào sử dụng
|
|
24
|
+
|
|
25
|
+
- Khi cần chọn một ngày cụ thể
|
|
26
|
+
- Khi cần chọn khoảng thời gian
|
|
27
|
+
- Khi cần chọn cả ngày và giờ
|
|
28
|
+
- Khi cần quick ranges để chọn nhanh
|
|
29
|
+
- Khi cần validation cho date input
|
|
30
|
+
|
|
31
|
+
## Cài đặt
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm install @libs-ui/components-datetime-picker
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Sử dụng cơ bản
|
|
38
|
+
|
|
39
|
+
### Date Range Picker
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
import { Component, signal } from '@angular/core';
|
|
43
|
+
import { LibsUiComponentsDatetimePickerComponent, IEmitDateRange } from '@libs-ui/components-datetime-picker';
|
|
44
|
+
|
|
45
|
+
@Component({
|
|
46
|
+
selector: 'app-example',
|
|
47
|
+
standalone: true,
|
|
48
|
+
imports: [LibsUiComponentsDatetimePickerComponent],
|
|
49
|
+
template: `
|
|
50
|
+
<libs_ui-components-datetime-picker
|
|
51
|
+
[(dateRangeSelected)]="dateRangeSelected"
|
|
52
|
+
(outSelectDateRange)="onDateRangeSelected($event)" />
|
|
53
|
+
`,
|
|
54
|
+
})
|
|
55
|
+
export class ExampleComponent {
|
|
56
|
+
readonly dateRangeSelected = signal<IEmitDateRange | undefined>(undefined);
|
|
57
|
+
|
|
58
|
+
onDateRangeSelected(event: IEmitDateRange) {
|
|
59
|
+
console.log('Date range selected:', event);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Single Date Picker
|
|
65
|
+
|
|
66
|
+
```typescript
|
|
67
|
+
import { Component, signal } from '@angular/core';
|
|
68
|
+
import { IEmitSingleDate } from '@libs-ui/components-datetime-picker';
|
|
69
|
+
|
|
70
|
+
@Component({
|
|
71
|
+
template: `
|
|
72
|
+
<libs_ui-components-datetime-picker
|
|
73
|
+
[isSingle]="true"
|
|
74
|
+
[(singleDateSelected)]="singleDateSelected" />
|
|
75
|
+
`,
|
|
76
|
+
})
|
|
77
|
+
export class ExampleComponent {
|
|
78
|
+
readonly singleDateSelected = signal<IEmitSingleDate | undefined>(undefined);
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### With Time Picker
|
|
83
|
+
|
|
84
|
+
```typescript
|
|
85
|
+
<libs_ui-components-datetime-picker
|
|
86
|
+
[hasTimePicker]="true"
|
|
87
|
+
[(dateRangeSelected)]="dateRangeSelected"
|
|
88
|
+
/>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### With Validation
|
|
92
|
+
|
|
93
|
+
```typescript
|
|
94
|
+
<libs_ui-components-datetime-picker
|
|
95
|
+
[validRequired]="{ message: 'Vui lòng chọn ngày' }"
|
|
96
|
+
[(dateRangeSelected)]="dateRangeSelected"
|
|
97
|
+
/>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## API
|
|
101
|
+
|
|
102
|
+
### Inputs
|
|
103
|
+
|
|
104
|
+
| Property | Type | Default | Description |
|
|
105
|
+
| ------------------------ | -------------------- | ----------- | ------------------------------------------ |
|
|
106
|
+
| `[isSingle]` | `boolean` | `false` | Chế độ chọn single date thay vì date range |
|
|
107
|
+
| `[hasTimePicker]` | `boolean` | `true` | Hiển thị time picker |
|
|
108
|
+
| `[dateOptions]` | `LocalizationConfig` | `default` | Cấu hình localization và custom ranges |
|
|
109
|
+
| `[allowReset]` | `boolean` | `true` | Cho phép reset date đã chọn |
|
|
110
|
+
| `[disable]` | `boolean` | `false` | Disable picker |
|
|
111
|
+
| `[readonly]` | `boolean` | `false` | Readonly mode |
|
|
112
|
+
| `[minDate]` | `Dayjs \| string` | `undefined` | Ngày tối thiểu có thể chọn |
|
|
113
|
+
| `[maxDate]` | `Dayjs \| string` | `undefined` | Ngày tối đa có thể chọn |
|
|
114
|
+
| `[placeholder]` | `string` | `undefined` | Placeholder text |
|
|
115
|
+
| `[validRequired]` | `IDateTimeValid` | `undefined` | Validation config |
|
|
116
|
+
| `[extendRanges]` | `Array<IDateRange>` | `[]` | Custom quick ranges |
|
|
117
|
+
| `[autoApply]` | `boolean` | `false` | Tự động apply khi chọn date |
|
|
118
|
+
| `[(singleDateSelected)]` | `IEmitSingleDate` | `undefined` | Two-way binding cho single date |
|
|
119
|
+
| `[(dateRangeSelected)]` | `IEmitDateRange` | `undefined` | Two-way binding cho date range |
|
|
120
|
+
|
|
121
|
+
### Outputs
|
|
122
|
+
|
|
123
|
+
| Property | Type | Description |
|
|
124
|
+
| ----------------------- | ------------------------------------- | -------------------------- |
|
|
125
|
+
| `(outSelectSingleDate)` | `IEmitSingleDate` | Event khi chọn single date |
|
|
126
|
+
| `(outSelectDateRange)` | `IEmitDateRange` | Event khi chọn date range |
|
|
127
|
+
| `(outReset)` | `IEmitDateRange \| IEmitSingleDate` | Event khi reset |
|
|
128
|
+
| `(outFunctionsControl)` | `IDateTimePickerFunctionControlEvent` | Function control event |
|
|
129
|
+
|
|
130
|
+
## Interfaces
|
|
131
|
+
|
|
132
|
+
### IEmitSingleDate
|
|
133
|
+
|
|
134
|
+
```typescript
|
|
135
|
+
export interface IEmitSingleDate {
|
|
136
|
+
date?: Dayjs | string;
|
|
137
|
+
displayLabel?: string;
|
|
138
|
+
}
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### IEmitDateRange
|
|
142
|
+
|
|
143
|
+
```typescript
|
|
144
|
+
export interface IEmitDateRange {
|
|
145
|
+
startDate?: Dayjs | string;
|
|
146
|
+
endDate?: Dayjs | string;
|
|
147
|
+
displayLabel?: string;
|
|
148
|
+
quickRangeId?: string;
|
|
149
|
+
}
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### IDateTimeValid
|
|
153
|
+
|
|
154
|
+
```typescript
|
|
155
|
+
export interface IDateTimeValid {
|
|
156
|
+
message?: string;
|
|
157
|
+
interpolateParams?: TYPE_OBJECT;
|
|
158
|
+
}
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
### LocalizationConfig
|
|
162
|
+
|
|
163
|
+
```typescript
|
|
164
|
+
export interface LocalizationConfig {
|
|
165
|
+
monthNames: string[];
|
|
166
|
+
ranges: { [key: string]: string };
|
|
167
|
+
daysOfWeek: string[];
|
|
168
|
+
applyLabel: string;
|
|
169
|
+
cancelLabel: string;
|
|
170
|
+
fromLabel: string;
|
|
171
|
+
toLabel: string;
|
|
172
|
+
customRangeLabel: string;
|
|
173
|
+
format?: string;
|
|
174
|
+
direction?: string;
|
|
175
|
+
separator?: string;
|
|
176
|
+
weekLabel?: string;
|
|
177
|
+
clearLabel?: string;
|
|
178
|
+
firstDay?: number;
|
|
179
|
+
displayFormat?: string;
|
|
180
|
+
}
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
## Ví dụ nâng cao
|
|
184
|
+
|
|
185
|
+
### Custom Ranges
|
|
186
|
+
|
|
187
|
+
```typescript
|
|
188
|
+
import { IDateRange } from '@libs-ui/components-datetime-picker';
|
|
189
|
+
import { getDayjs } from '@libs-ui/utils';
|
|
190
|
+
|
|
191
|
+
const customRanges: IDateRange[] = [
|
|
192
|
+
{
|
|
193
|
+
id: 'last_7_days',
|
|
194
|
+
label: '7 ngày qua',
|
|
195
|
+
startDate: getDayjs().subtract(7, 'days'),
|
|
196
|
+
endDate: getDayjs()
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
id: 'last_30_days',
|
|
200
|
+
label: '30 ngày qua',
|
|
201
|
+
startDate: getDayjs().subtract(30, 'days'),
|
|
202
|
+
endDate: getDayjs()
|
|
203
|
+
}
|
|
204
|
+
];
|
|
205
|
+
|
|
206
|
+
// Sử dụng
|
|
207
|
+
<libs_ui-components-datetime-picker
|
|
208
|
+
[extendRanges]="customRanges"
|
|
209
|
+
[(dateRangeSelected)]="dateRangeSelected"
|
|
210
|
+
/>
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
### Min/Max Date
|
|
214
|
+
|
|
215
|
+
```typescript
|
|
216
|
+
import { getDayjs } from '@libs-ui/utils';
|
|
217
|
+
|
|
218
|
+
const minDate = getDayjs().subtract(1, 'year');
|
|
219
|
+
const maxDate = getDayjs().add(1, 'year');
|
|
220
|
+
|
|
221
|
+
<libs_ui-components-datetime-picker
|
|
222
|
+
[minDate]="minDate"
|
|
223
|
+
[maxDate]="maxDate"
|
|
224
|
+
[(dateRangeSelected)]="dateRangeSelected"
|
|
225
|
+
/>
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
## Dependencies
|
|
229
|
+
|
|
230
|
+
- `@angular/core` >= 18.0.0
|
|
231
|
+
- `@angular/common` >= 18.0.0
|
|
232
|
+
- `dayjs`
|
|
233
|
+
- `@libs-ui/components-label`
|
|
234
|
+
- `@libs-ui/components-popover`
|
|
235
|
+
- `@libs-ui/utils`
|
|
236
|
+
- `@ngx-translate/core`
|
|
237
|
+
|
|
238
|
+
## Demo
|
|
239
|
+
|
|
240
|
+
Xem demo tại: [http://localhost:4500/datetime/picker](http://localhost:4500/datetime/picker)
|
|
241
|
+
|
|
242
|
+
## License
|
|
243
|
+
|
|
244
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-datetime-picker",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.356-1",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-buttons-button": "0.2.
|
|
7
|
-
"@libs-ui/components-dropdown": "0.2.
|
|
8
|
-
"@libs-ui/components-inputs-input": "0.2.
|
|
9
|
-
"@libs-ui/components-list": "0.2.
|
|
10
|
-
"@libs-ui/components-popover": "0.2.
|
|
11
|
-
"@libs-ui/interfaces-types": "0.2.
|
|
12
|
-
"@libs-ui/services-http-request": "0.2.
|
|
13
|
-
"@libs-ui/utils": "0.2.
|
|
6
|
+
"@libs-ui/components-buttons-button": "0.2.356-1",
|
|
7
|
+
"@libs-ui/components-dropdown": "0.2.356-1",
|
|
8
|
+
"@libs-ui/components-inputs-input": "0.2.356-1",
|
|
9
|
+
"@libs-ui/components-list": "0.2.356-1",
|
|
10
|
+
"@libs-ui/components-popover": "0.2.356-1",
|
|
11
|
+
"@libs-ui/interfaces-types": "0.2.356-1",
|
|
12
|
+
"@libs-ui/services-http-request": "0.2.356-1",
|
|
13
|
+
"@libs-ui/utils": "0.2.356-1",
|
|
14
14
|
"@ngx-translate/core": "^15.0.0",
|
|
15
15
|
"dayjs": "1.11.5",
|
|
16
|
-
"@libs-ui/components-label": "0.2.
|
|
16
|
+
"@libs-ui/components-label": "0.2.356-1"
|
|
17
17
|
},
|
|
18
18
|
"sideEffects": false,
|
|
19
19
|
"module": "fesm2022/libs-ui-components-datetime-picker.mjs",
|