@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

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

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

Import

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

<!-- 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ể

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

Lấy đối tượng Dayjs

@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ụ:

npm run demo

• Local: http://localhost:4500/pipes/format-date

Unit Tests

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

License

MIT