npm package: @libs-ui/components-datetime-picker
Description: > Component chọn ngày tháng với hỗ trợ single date, date range, time picker và custom ranges
Latest version: 0.2.356-23

# @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

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

## Sử dụng cơ bản

### Date Range Picker

```typescript
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

```typescript
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

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

### With Validation

```typescript
<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

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

### IEmitDateRange

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

### IDateTimeValid

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

### LocalizationConfig

```typescript
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

```typescript
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

```typescript
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](http://localhost:4500/datetime/picker)

## License

MIT