Calendar

New

A simple date picker with a monthly calendar.

Single dateKeyboard accessibleSelection event

Overview

Choose a date, jump to today or clear the selection. Use arrow keys to move between days and Escape to close.

Appointment date

No date selected yet.

HTMLValue and events

<av-calendar inputId="appointment" label="Appointment date"
  [(ngModel)]="date" (onSelect)="selected($event)" />

Reactive forms and date limits

This example accepts dates in the current and next month. Limits are inclusive.

Booking date

Sizes and states

Small

Large

Disabled

Invalid

Choose a valid date.

Usage and API

Import AvCalendar with FormsModule or ReactiveFormsModule. The value is Date | null, using local calendar dates displayed as DD/MM/YYYY.

TYPESCRIPTForms and events

import { AvCalendar } from 'avero-ui';

readonly date = new FormControl<Date | null>(null);

selected(date: Date | null): void {
  console.log(date);
}

Events. onSelect emits a Date after selection or null after clearing. Programmatic writes and resets do not emit this output.

Scope. Single date selection only. Date limits restrict user selection; use form validators to validate programmatic values. Text entry, time and range selection are not included.

Theme. Customize --av-calendar-accent, --av-calendar-border, --av-calendar-background, --av-calendar-color, --av-calendar-radius and --av-calendar-hover.