@libs-ui/pipes-format-date 0.2.355-9 → 0.2.356-0
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 +125 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,3 +1,126 @@
|
|
|
1
|
-
# pipes-format-date
|
|
1
|
+
# @libs-ui/pipes-format-date
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Bộ đôi pipe hỗ trợ định dạng thời gian và khởi tạo đối tượng Dayjs cho Angular 18+.
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
7
|
+
`@libs-ui/pipes-format-date` cung cấp hai pipe standalone:
|
|
8
|
+
|
|
9
|
+
- `LibsUiPipesFormatDatePipe`: Định dạng thời gian từ nhiều kiểu đầu vào (Date, ISO string, timestamp) thành chuỗi hiển thị.
|
|
10
|
+
- `LibsUiPipesGetDayjsPipe`: Khởi tạo và trả về đối tượng Dayjs từ cấu hình cho trước.
|
|
11
|
+
|
|
12
|
+
Cả hai đều được thiết kế tối ưu, hỗ trợ đa ngôn ngữ và tree-shaking.
|
|
13
|
+
|
|
14
|
+
### Tính năng
|
|
15
|
+
|
|
16
|
+
- **Linh hoạt**: Chấp nhận đầu vào là string, number, Date hoặc Dayjs object.
|
|
17
|
+
- **Định dạng tùy biến**: Hỗ trợ mọi định dạng mà Dayjs cho phép.
|
|
18
|
+
- **Đa ngôn ngữ**: Dễ dàng thay đổi locale (vi, en, ...).
|
|
19
|
+
- **Hiệu năng**: Pure pipe, chỉ thực thi lại khi input tham chiếu thay đổi.
|
|
20
|
+
- **Standalone**: Dễ dàng import vào bất kỳ component nào.
|
|
21
|
+
- **Dayjs Integration**: Tích hợp sâu với thư viện xử lý thời gian mạnh mẽ.
|
|
22
|
+
|
|
23
|
+
## Khi nào sử dụng
|
|
24
|
+
|
|
25
|
+
- Khi cần hiển thị ngày tháng năm trong template HTML theo định dạng chuẩn (ví dụ: `DD/MM/YYYY`).
|
|
26
|
+
- Khi cần track sự thay đổi thời gian trong template mà không muốn viết quá nhiều logic trong component class.
|
|
27
|
+
- Khi cần lấy đối tượng Dayjs từ một config JSON trong template để thực hiện các phép tính ngày tháng nhanh.
|
|
28
|
+
|
|
29
|
+
## Cài đặt
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
# npm
|
|
33
|
+
npm install @libs-ui/pipes-format-date
|
|
34
|
+
|
|
35
|
+
# yarn
|
|
36
|
+
yarn add @libs-ui/pipes-format-date
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Import
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
import { LibsUiPipesFormatDatePipe, LibsUiPipesGetDayjsPipe } from '@libs-ui/pipes-format-date';
|
|
43
|
+
|
|
44
|
+
@Component({
|
|
45
|
+
standalone: true,
|
|
46
|
+
imports: [LibsUiPipesFormatDatePipe, LibsUiPipesGetDayjsPipe],
|
|
47
|
+
// ...
|
|
48
|
+
})
|
|
49
|
+
export class YourComponent {}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Ví dụ
|
|
53
|
+
|
|
54
|
+
### Định dạng ngày tháng cơ bản
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<!-- Mặc định: YYYY/MM/DD HH:mm -->
|
|
58
|
+
<span>{{ timestamp | LibsUiPipesFormatDatePipe }}</span>
|
|
59
|
+
|
|
60
|
+
<!-- Custom format -->
|
|
61
|
+
<span>{{ dateString | LibsUiPipesFormatDatePipe:'DD/MM/YYYY' }}</span>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Định dạng với ngôn ngữ cụ thể
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<span>{{ now | LibsUiPipesFormatDatePipe:'dddd, DD MMMM YYYY':'vi' }}</span>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Lấy đối tượng Dayjs
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
@let dayjsObj = (config | LibsUiPipesGetDayjsPipe); @if (dayjsObj) {
|
|
74
|
+
<span>Year: {{ dayjsObj.year() }}</span>
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## API
|
|
79
|
+
|
|
80
|
+
### LibsUiPipesFormatDatePipe
|
|
81
|
+
|
|
82
|
+
#### Parameters
|
|
83
|
+
|
|
84
|
+
| Property | Type | Default | Description |
|
|
85
|
+
| -------------- | ------------------------------------------------------ | -------------------- | ---------------------------------------------------------------------- |
|
|
86
|
+
| `time` | `string \| number \| dayjs.Dayjs \| null \| undefined` | `undefined` | Giá trị thời gian cần định dạng |
|
|
87
|
+
| `formatOutput` | `string` | `'YYYY/MM/DD HH:mm'` | Định dạng đầu ra mong muốn |
|
|
88
|
+
| `lang` | `string` | `undefined` | Ngôn ngữ hiển thị (vi, en, ...) |
|
|
89
|
+
| `formatInput` | `string` | `undefined` | Định dạng của chuỗi đầu vào (trường hợp dayjs không tự nhận diện được) |
|
|
90
|
+
|
|
91
|
+
### LibsUiPipesGetDayjsPipe
|
|
92
|
+
|
|
93
|
+
#### Parameters
|
|
94
|
+
|
|
95
|
+
| Property | Type | Default | Description |
|
|
96
|
+
| -------- | ------------------------------------------------------ | ----------- | ------------------------------- |
|
|
97
|
+
| `config` | `{ date?: any, utc?: boolean, formatOfDate?: string }` | `undefined` | Cấu hình để tạo đối tượng Dayjs |
|
|
98
|
+
|
|
99
|
+
## Công nghệ
|
|
100
|
+
|
|
101
|
+
| Technology | Version | Purpose |
|
|
102
|
+
| -------------- | ---------- | -------------- |
|
|
103
|
+
| Angular | 18+ | Framework |
|
|
104
|
+
| Day.js | 1.11.5 | Date logic |
|
|
105
|
+
| @libs-ui/utils | 0.2.355-15 | Core utilities |
|
|
106
|
+
|
|
107
|
+
## Demo
|
|
108
|
+
|
|
109
|
+
Chạy demo page để xem trực quan các ví dụ:
|
|
110
|
+
|
|
111
|
+
```bash
|
|
112
|
+
npm run demo
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
- Local: [http://localhost:4500/pipes/format-date](http://localhost:4500/pipes/format-date)
|
|
116
|
+
|
|
117
|
+
## Unit Tests
|
|
118
|
+
|
|
119
|
+
```bash
|
|
120
|
+
npx nx test pipes-format-date
|
|
121
|
+
npx nx test pipes-format-date --coverage
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
## License
|
|
125
|
+
|
|
126
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/pipes-format-date",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.356-0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
6
|
"dayjs": "1.11.5",
|
|
7
|
-
"@libs-ui/utils": "0.2.
|
|
7
|
+
"@libs-ui/utils": "0.2.356-0"
|
|
8
8
|
},
|
|
9
9
|
"sideEffects": false,
|
|
10
10
|
"module": "fesm2022/libs-ui-pipes-format-date.mjs",
|