npm package: @libs-ui/pipes-format-date
Description: > Bộ đôi pipe hỗ trợ định dạng thời gian và khởi tạo đối tượng Dayjs cho Angular 18+.
Latest version: 0.2.356-23

# @libs-ui/pipes-format-date

> Bộ đôi pipe hỗ trợ định dạng thời gian và khởi tạo đối tượng Dayjs cho Angular 18+.

## Giới thiệu

`@libs-ui/pipes-format-date` cung cấp hai pipe standalone:

- `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ị.
- `LibsUiPipesGetDayjsPipe`: Khởi tạo và trả về đối tượng Dayjs từ cấu hình cho trước.

Cả hai đều được thiết kế tối ưu, hỗ trợ đa ngôn ngữ và tree-shaking.

### Tính năng

- **Linh hoạt**: Chấp nhận đầu vào là string, number, Date hoặc Dayjs object.
- **Định dạng tùy biến**: Hỗ trợ mọi định dạng mà Dayjs cho phép.
- **Đa ngôn ngữ**: Dễ dàng thay đổi locale (vi, en, ...).
- **Hiệu năng**: Pure pipe, chỉ thực thi lại khi input tham chiếu thay đổi.
- **Standalone**: Dễ dàng import vào bất kỳ component nào.
- **Dayjs Integration**: Tích hợp sâu với thư viện xử lý thời gian mạnh mẽ.

## Khi nào sử dụng

- 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`).
- 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.
- 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.

## Cài đặt

```bash
# npm
npm install @libs-ui/pipes-format-date

# yarn
yarn add @libs-ui/pipes-format-date
```

## Import

```typescript
import { LibsUiPipesFormatDatePipe, LibsUiPipesGetDayjsPipe } from '@libs-ui/pipes-format-date';

@Component({
  standalone: true,
  imports: [LibsUiPipesFormatDatePipe, LibsUiPipesGetDayjsPipe],
  // ...
})
export class YourComponent {}
```

## Ví dụ

### Định dạng ngày tháng cơ bản

```html
<!-- Mặc định: YYYY/MM/DD HH:mm -->
<span>{{ timestamp | LibsUiPipesFormatDatePipe }}</span>

<!-- Custom format -->
<span>{{ dateString | LibsUiPipesFormatDatePipe:'DD/MM/YYYY' }}</span>
```

### Định dạng với ngôn ngữ cụ thể

```html
<span>{{ now | LibsUiPipesFormatDatePipe:'dddd, DD MMMM YYYY':'vi' }}</span>
```

### Lấy đối tượng Dayjs

```html
@let dayjsObj = (config | LibsUiPipesGetDayjsPipe); @if (dayjsObj) {
<span>Year: {{ dayjsObj.year() }}</span>
}
```

## API

### LibsUiPipesFormatDatePipe

#### Parameters

| Property       | Type                                                   | Default              | Description                                                            |
| -------------- | ------------------------------------------------------ | -------------------- | ---------------------------------------------------------------------- |
| `time`         | `string \| number \| dayjs.Dayjs \| null \| undefined` | `undefined`          | Giá trị thời gian cần định dạng                                        |
| `formatOutput` | `string`                                               | `'YYYY/MM/DD HH:mm'` | Định dạng đầu ra mong muốn                                             |
| `lang`         | `string`                                               | `undefined`          | Ngôn ngữ hiển thị (vi, en, ...)                                        |
| `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) |

### LibsUiPipesGetDayjsPipe

#### Parameters

| Property | Type                                                   | Default     | Description                     |
| -------- | ------------------------------------------------------ | ----------- | ------------------------------- |
| `config` | `{ date?: any, utc?: boolean, formatOfDate?: string }` | `undefined` | Cấu hình để tạo đối tượng Dayjs |

## Công nghệ

| Technology     | Version    | Purpose        |
| -------------- | ---------- | -------------- |
| Angular        | 18+        | Framework      |
| Day.js         | 1.11.5     | Date logic     |
| @libs-ui/utils | 0.2.355-15 | Core utilities |

## Demo

Chạy demo page để xem trực quan các ví dụ:

```bash
npm run demo
```

- Local: [http://localhost:4500/pipes/format-date](http://localhost:4500/pipes/format-date)

## Unit Tests

```bash
npx nx test pipes-format-date
npx nx test pipes-format-date --coverage
```

## License

MIT