VUI
NPM

VUI Date Picker

A fully-featured, customizable Angular date picker component with rich options, validation, and accessibility support.

Angular 20+ Reactive Forms TypeScript Tailwind CSS Accessible

✨ Key Features

📅

Rich Date Options

Custom date formats, disable ranges, highlight dates, and more configuration options.

🎯

Form Integration

Seamless integration with Angular reactive forms and template-driven forms.

♿

Accessibility First

Full keyboard navigation, ARIA support, and screen reader compatibility.

📦 Installation

Install via npm

npm install @vui/date-picker

Import in your module

import { VuiDatePicker } from '@vui/date-picker';

@Component({
  standalone: true,
  imports: [VuiDatePicker],
  // ...
})

⚡ Quick Start

Basic Date Picker

const basicOptions: IMyDpOptions = {
  dateFormat: 'dd/mm/yyyy',
  markCurrentDay: true,
  todayBtnTxt: 'Today',
  clearBtnTxt: 'Clear'
};

Date Range Picker

const rangeOptions: IMyDpOptions = {
  dateRange: true,
  rangeSeparator: ' - ',
  dateFormat: 'dd/mm/yyyy',
  markCurrentDay: true,
  showWeekNumbers: true
};

Localized Date Picker

const localizedOptions: IMyDpOptions = {
  dateFormat: 'dd.mm.yyyy',
  firstDayOfWeek: 'mo',
  monthLabels: {
    1: 'Januar', 2: 'Februar', 3: 'März',
    4: 'April', 5: 'Mai', 6: 'Juni'
  },
  dayLabels: { su: 'So', mo: 'Mo', tu: 'Di' }
};

Validated Date Picker

const validatedOptions: IMyDpOptions = {
  dateFormat: 'yyyy-mm-dd',
  minYear: 1900,
  maxYear: 2030,
  disableUntil: { year: 2020, month: 1, day: 1 },
  disableSince: { year: 2025, month: 12, day: 31 }
};

🎯 Use Cases & Examples

Single Date Selection

Perfect for birthdays, deadlines, and appointment scheduling.

<my-date-picker [(ngModel)]="birthday" [options]="{dateFormat: 'dd/mm/yyyy'}"></my-date-picker>

Date Range Selection

Ideal for booking systems, reporting periods, and date filters.

<my-date-picker [(ngModel)]="dateRange" [options]="{dateRange: true, rangeSeparator: ' - '}"></my-date-picker>

Form Integration

Seamless integration with Angular reactive forms and validation.

<my-date-picker [formControl]="dateControl" [options]="formDateOptions"></my-date-picker>

Validation & Restrictions

Min/max dates, disabled dates, and custom validation rules.

<my-date-picker [options]="{disableDates: weekends, minYear: 2020, maxYear: 2025}"></my-date-picker>

🚀 Basic Usage

Simple Date Picker

Live Demo

Click the input above to open the interactive date picker.

Implementation

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, VuiDatePicker],
  template: `
    <form [formGroup]="myForm">
      <ng-vui-date-picker
        formControlName="selectedDate"
        [placeholder]="'Select date...'"
        [options]="datePickerOptions">
      </ng-vui-date-picker>
    </form>
  `
})
export class MyComponent {
  myForm = this.fb.group({
    selectedDate: ['']
  });

  datePickerOptions: VuiOptions = {
    dateFormat: 'dd-mm-yyyy',
    todayBtnTxt: 'Today',
    sunHighlight: true
  };

  constructor(private fb: FormBuilder) {}
}

⚡ Advanced Examples

Date Range Selection

Date Range Demo

export class DateRangeComponent {
  rangeForm = this.fb.group({
    startDate: ['', Validators.required],
    endDate: ['', Validators.required]
  });

  startDateOptions: VuiOptions = {
    dateFormat: 'dd-mm-yyyy',
    todayBtnTxt: 'Today',
    sunHighlight: true
  };

  endDateOptions: VuiOptions = {
    dateFormat: 'dd-mm-yyyy',
    todayBtnTxt: 'Today',
    sunHighlight: true,
    disableUntil: { year: 2024, month: 1, day: 1 } // Dynamic based on start date
  };

  onStartDateChanged(event: VuiDateModel): void {
    // Update end date options to disable dates before start date
    this.endDateOptions = {
      ...this.endDateOptions,
      disableUntil: event.date
    };
  }
}

Custom Options & Validation

export class CustomDatePickerComponent {
  customOptions: VuiOptions = {
    dateFormat: 'yyyy-mm-dd',
    todayBtnTxt: 'Select Today',
    firstDayOfWeek: 'mo', // Monday as first day
    sunHighlight: true,
    satHighlight: true,
    showTodayBtn: true,
    
    // Disable past dates
    disableUntil: {
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      day: new Date().getDate() - 1
    },
    
    // Highlight special dates
    highlightDates: [
      { year: 2024, month: 12, day: 25 }, // Christmas
      { year: 2024, month: 1, day: 1 }    // New Year
    ],
    
    // Disable weekends
    disableWeekends: true,
    
    // Custom styling
    selectionTxtFontSize: '14px',
    height: '34px',
    width: '100%',
    
    // Accessibility
    ariaLabelInputField: 'Date picker input',
    ariaLabelOpenCalendar: 'Open calendar'
  };

  // Event handlers
  onDateChanged(event: VuiDateModel): void {
    console.log('Selected date:', event);
    // Handle date change
  }

  onInputFieldChanged(event: VuiInputFieldChanged): void {
    console.log('Input changed:', event);
    // Handle manual input
  }

  onCalendarViewChanged(event: VuiCalendarViewChanged): void {
    console.log('Calendar view changed:', event);
    // Handle month/year navigation
  }
}

📚 API Reference

Component Inputs

Property Type Default Description
options VuiOptions - Configuration options for the date picker
placeholder string '' Placeholder text for the input field
disabled boolean false Whether the date picker is disabled

Component Outputs

Event Type Description
dateChanged VuiDateModel Emitted when a date is selected
inputFieldChanged VuiInputFieldChanged Emitted when input field value changes
calendarViewChanged VuiCalendarViewChanged Emitted when calendar view changes