Date Picker Component

This component is a highly customizable date and time picker for Angular applications. It allows users to select a date and, optionally, a time, with support for min/max dates, configurable minute steps, and flexible input/output formats.

Purpose

The app-date-picker component is designed to provide a user-friendly and flexible way to select dates and times. It can be easily integrated into Angular forms and supports both template-driven and reactive forms.

Dependencies

This component relies on the following third-party libraries:

• date-fns: ^4.1.0 (for date manipulation and formatting)
• class-variance-authority: ^0.7.1 (for creating reusable class variants)
• clsx: ^2.1.1 (for conditionally constructing className strings)
• tailwind-merge: ^3.3.1 (for merging Tailwind CSS classes)
• tailwindcss: ^4.1.11 (a utility-first CSS framework)

Make sure these dependencies are installed in your project using your preferred package manager:

# npm
npm install date-fns class-variance-authority clsx tailwind-merge tailwindcss

# pnpm
pnpm add date-fns class-variance-authority clsx tailwind-merge tailwindcss

# yarn
yarn add date-fns class-variance-authority clsx tailwind-merge tailwindcss

For detailed instructions on how to set up Tailwind CSS with Angular, please refer to the official guide: Tailwind CSS Installation with Angular

Options

The component offers several options to customize its behavior:

| Input | Type | Default | Description | |----------------|--------------------------|---------|------------------------------------------------------------------------------------| | minDate | string \| null | null | The minimum selectable date in ISO 8601 format (e.g., '2024-01-01T00:00:00.000Z'). | | maxDate | string \| null | null | The maximum selectable date in ISO 8601 format (e.g., '2025-12-31T23:59:59.999Z'). | | minuteStep | 1 \| 5 \| 10 \| 15 \| 30 | 30 | The step for minute selection in the time picker. | | showTime | boolean | false | Whether to show the time selection inputs. |

Input and Output Formats

The component uses the ISO 8601 format (YYYY-MM-DDTHH:mm:ss.sssZ) for all data communication (input and output). This ensures consistency and compatibility with standard date formats.

• Input: The component accepts a date in ISO 8601 format. You can provide this value through [(ngModel)] or a FormControl.
• Output: The component emits the selected date in ISO 8601 format.

User Display Format

While the component uses ISO 8601 for data, the display format for the user is more human-readable and depends on the showTime option:

• If [showTime]="true", the display format is dd/MM/yyyy HH:mm.
• If [showTime]="false", the display format is dd/MM/yyyy.

Example Usage

Template-Driven Forms

// in your component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-date-picker
      [(ngModel)]="selectedDate"
      [minDate]="'2024-01-01T00:00:00.000Z'"
      [maxDate]="'2025-12-31T23:59:59.999Z'"
      [minuteStep]="15"
    ></app-date-picker>
  `
})
export class AppComponent {
  selectedDate = '2024-01-23T15:15:00.000Z';
}

Reactive Forms

// in your component.ts
import { Component } from '@angular/core';
import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <app-date-picker formControlName="date"></app-date-picker>
    </form>
  `,
  standalone: true,
  imports: [ReactiveFormsModule, DatePickerComponent] // Import DatePickerComponent if it's standalone
})
export class AppComponent {
  form = new FormGroup({
    date: new FormControl('2024-01-23T15:15:00.000Z')
  });
}