@libs-ui/components-datetime-picker

Component chọn ngày tháng với hỗ trợ single date, date range, time picker và custom ranges

Giới thiệu

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.

Tính năng

• ✅ Single Date Picker
• ✅ Date Range Picker
• ✅ Time Picker (có thể bật/tắt)
• ✅ Quick Ranges (hôm nay, tuần này, tháng này, ...)
• ✅ Custom Ranges
• ✅ Min/Max Date validation
• ✅ Required validation
• ✅ Localization support
• ✅ Standalone Component
• ✅ OnPush Change Detection
• ✅ Two-way binding với model signals

Khi nào sử dụng

• Khi cần chọn một ngày cụ thể
• Khi cần chọn khoảng thời gian
• Khi cần chọn cả ngày và giờ
• Khi cần quick ranges để chọn nhanh
• Khi cần validation cho date input

Cài đặt

npm install @libs-ui/components-datetime-picker

Sử dụng cơ bản

Date Range Picker

import { Component, signal } from '@angular/core';
import { LibsUiComponentsDatetimePickerComponent, IEmitDateRange } from '@libs-ui/components-datetime-picker';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsDatetimePickerComponent],
  template: `
    <libs_ui-components-datetime-picker
      [(dateRangeSelected)]="dateRangeSelected"
      (outSelectDateRange)="onDateRangeSelected($event)" />
  `,
})
export class ExampleComponent {
  readonly dateRangeSelected = signal<IEmitDateRange | undefined>(undefined);

  onDateRangeSelected(event: IEmitDateRange) {
    console.log('Date range selected:', event);
  }
}

Single Date Picker

import { Component, signal } from '@angular/core';
import { IEmitSingleDate } from '@libs-ui/components-datetime-picker';

@Component({
  template: `
    <libs_ui-components-datetime-picker
      [isSingle]="true"
      [(singleDateSelected)]="singleDateSelected" />
  `,
})
export class ExampleComponent {
  readonly singleDateSelected = signal<IEmitSingleDate | undefined>(undefined);
}

With Time Picker

<libs_ui-components-datetime-picker
  [hasTimePicker]="true"
  [(dateRangeSelected)]="dateRangeSelected"
/>

With Validation

<libs_ui-components-datetime-picker
  [validRequired]="{ message: 'Vui lòng chọn ngày' }"
  [(dateRangeSelected)]="dateRangeSelected"
/>

API

Inputs

| Property | Type | Default | Description | | ------------------------ | -------------------- | ----------- | ------------------------------------------ | | [isSingle] | boolean | false | Chế độ chọn single date thay vì date range | | [hasTimePicker] | boolean | true | Hiển thị time picker | | [dateOptions] | LocalizationConfig | default | Cấu hình localization và custom ranges | | [allowReset] | boolean | true | Cho phép reset date đã chọn | | [disable] | boolean | false | Disable picker | | [readonly] | boolean | false | Readonly mode | | [minDate] | Dayjs \| string | undefined | Ngày tối thiểu có thể chọn | | [maxDate] | Dayjs \| string | undefined | Ngày tối đa có thể chọn | | [placeholder] | string | undefined | Placeholder text | | [validRequired] | IDateTimeValid | undefined | Validation config | | [extendRanges] | Array<IDateRange> | [] | Custom quick ranges | | [autoApply] | boolean | false | Tự động apply khi chọn date | | [(singleDateSelected)] | IEmitSingleDate | undefined | Two-way binding cho single date | | [(dateRangeSelected)] | IEmitDateRange | undefined | Two-way binding cho date range |

Outputs

| Property | Type | Description | | ----------------------- | ------------------------------------- | -------------------------- | | (outSelectSingleDate) | IEmitSingleDate | Event khi chọn single date | | (outSelectDateRange) | IEmitDateRange | Event khi chọn date range | | (outReset) | IEmitDateRange \| IEmitSingleDate | Event khi reset | | (outFunctionsControl) | IDateTimePickerFunctionControlEvent | Function control event |

Interfaces

IEmitSingleDate

export interface IEmitSingleDate {
  date?: Dayjs | string;
  displayLabel?: string;
}

IEmitDateRange

export interface IEmitDateRange {
  startDate?: Dayjs | string;
  endDate?: Dayjs | string;
  displayLabel?: string;
  quickRangeId?: string;
}

IDateTimeValid

export interface IDateTimeValid {
  message?: string;
  interpolateParams?: TYPE_OBJECT;
}

LocalizationConfig

export interface LocalizationConfig {
  monthNames: string[];
  ranges: { [key: string]: string };
  daysOfWeek: string[];
  applyLabel: string;
  cancelLabel: string;
  fromLabel: string;
  toLabel: string;
  customRangeLabel: string;
  format?: string;
  direction?: string;
  separator?: string;
  weekLabel?: string;
  clearLabel?: string;
  firstDay?: number;
  displayFormat?: string;
}

Ví dụ nâng cao

Custom Ranges

import { IDateRange } from '@libs-ui/components-datetime-picker';
import { getDayjs } from '@libs-ui/utils';

const customRanges: IDateRange[] = [
  {
    id: 'last_7_days',
    label: '7 ngày qua',
    startDate: getDayjs().subtract(7, 'days'),
    endDate: getDayjs()
  },
  {
    id: 'last_30_days',
    label: '30 ngày qua',
    startDate: getDayjs().subtract(30, 'days'),
    endDate: getDayjs()
  }
];

// Sử dụng
<libs_ui-components-datetime-picker
  [extendRanges]="customRanges"
  [(dateRangeSelected)]="dateRangeSelected"
/>

Min/Max Date

import { getDayjs } from '@libs-ui/utils';

const minDate = getDayjs().subtract(1, 'year');
const maxDate = getDayjs().add(1, 'year');

<libs_ui-components-datetime-picker
  [minDate]="minDate"
  [maxDate]="maxDate"
  [(dateRangeSelected)]="dateRangeSelected"
/>

Dependencies

• @angular/core >= 18.0.0
• @angular/common >= 18.0.0
• dayjs
• @libs-ui/components-label
• @libs-ui/components-popover
• @libs-ui/utils
• @ngx-translate/core

Demo

Xem demo tại: http://localhost:4500/datetime/picker

License

MIT