AvTimePicker

AvTimePicker is a premium, neon-styled Angular time picker component featuring a dual-view interface with an Arc Dial and a Numpad entry. It supports multiple neon themes, a clean light/white theme, and is fully compatible with any timezone.

Features

• Dual View — Seamlessly switch between a circular Arc Dial and a numeric Numpad entry.
• Neon Themes — Choose from vibrant themes: green, blue, yellow, pink, red, and white.
• Timezone Support — Set any valid IANA timezone; the picker initialises with the correct local time.
• Reactive Forms — Implements ControlValueAccessor for full Angular Reactive Forms support.
• Template-Driven Forms — Also works with [(ngModel)] for simpler bindings.
• Popup Input — AvTimePickerInput wraps the picker in a styled text field with a popup panel.
• Smart Value Normalisation — Accepts "HH:MM", "HH:MM AM/PM", and "HH:MM" in 24-hour format.
• Responsive Design — Works on both desktop and touch devices; popup repositions on small screens.
• Premium Aesthetics — High-quality SVG animations, arc glow effects, and micro-interactions.

Installation

npm install @avoraui/av-time-picker

Components

This package exports two components:

| Component | Selector | Description | |-----------|----------|-------------| | AvTimePicker | av-time-picker | The standalone dial/numpad picker card. | | AvTimePickerInput | av-time-picker-input | A styled text input that opens the picker in a popup. |

Usage

Basic Picker (av-time-picker)

Import in your standalone component or NgModule:

import { AvTimePicker } from '@avoraui/av-time-picker';

@Component({
  standalone: true,
  imports: [AvTimePicker],
})
export class MyComponent {}

<av-time-picker
  [theme]="'blue'"
  [timeZone]="'America/New_York'"
  [formControl]="timeControl">
</av-time-picker>

Input Field with Popup (av-time-picker-input)

For a text field that opens the picker in a floating popup:

import { AvTimePickerInput } from '@avoraui/av-time-picker';

@Component({
  standalone: true,
  imports: [AvTimePickerInput],
})
export class MyComponent {}

<av-time-picker-input
  theme="green"
  placeholder="Select time"
  [timeZone]="'Asia/Colombo'"
  [(ngModel)]="selectedTime">
</av-time-picker-input>

Reactive Forms Integration

import { FormBuilder } from '@angular/forms';

export class MyComponent {
  form = this.fb.group({
    time: ['']
  });

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    // Set a value programmatically — accepts HH:MM or HH:MM AM/PM
    this.form.get('time')?.setValue('14:30');     // → "02:30 PM"
    this.form.get('time')?.setValue('07:00 AM'); // → "07:00 AM"

    // Listen for changes
    this.form.get('time')?.valueChanges.subscribe(value => {
      console.log('Time changed:', value); // "07:00 AM"
    });
  }
}

<form [formGroup]="form">
  <av-time-picker-input
    theme="blue"
    placeholder="Select time"
    formControlName="time">
  </av-time-picker-input>
  <p>Selected: {{ form.get('time')?.value }}</p>
</form>

Note: Do not mix formControlName and [(ngModel)] on the same element. Use one binding approach per field.

API

AvTimePicker Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | theme | 'green' \| 'blue' \| 'yellow' \| 'pink' \| 'red' \| 'white' | 'green' | Sets the colour theme. | | timeZone | string | System timezone | Any valid IANA timezone string (e.g. 'Asia/Tokyo'). | | defaultView | 'dial' \| 'numpad' | 'dial' | The initial view shown when the picker opens. |

AvTimePickerInput Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | theme | 'green' \| 'blue' \| 'yellow' \| 'pink' \| 'red' \| 'white' | 'green' | Sets the colour theme of both the input and popup. | | timeZone | string | System timezone | Any valid IANA timezone string. | | placeholder | string | 'Select time' | Placeholder text shown when no value is set. | | label | string | '' | Optional label rendered above the input field. |

Value Format

The component emits and accepts time values as a string.

| Input format | Normalised output | |---|---| | "07:30 AM" | "07:30 AM" | | "07:30" | "07:30 AM" | | "14:30" | "02:30 PM" | | "12:00" | "12:00 PM" | | "00:00" | "12:00 AM" |

Themes Preview

| Theme | Accent | Best for | |-------|--------|----------| | green | #00f5c4 | Dark dashboards, dev tools | | blue | #38bdf8 | Admin panels, analytics | | yellow | #fde047 | Alerts, calendars | | pink | #f472b6 | Lifestyle, social apps | | red | #f87171 | Urgent actions, alerts | | white | #000000 | Light-themed applications |

Examples

Multiple timezones

<av-time-picker-input theme="blue"   timeZone="Asia/Colombo"   placeholder="Sri Lanka" [(ngModel)]="time1"></av-time-picker-input>
<av-time-picker-input theme="yellow" timeZone="Asia/Tokyo"     placeholder="Tokyo"     [(ngModel)]="time2"></av-time-picker-input>
<av-time-picker-input theme="pink"   timeZone="Europe/London"  placeholder="London"    [(ngModel)]="time3"></av-time-picker-input>
<av-time-picker-input theme="white"  timeZone="America/New_York" placeholder="New York" [(ngModel)]="time4"></av-time-picker-input>

Disabled state

<av-time-picker-input theme="green" [disabled]="true" [(ngModel)]="time"></av-time-picker-input>

Start in numpad view

<av-time-picker theme="red" defaultView="numpad" [formControl]="timeControl"></av-time-picker>

Requirements

• Angular 17+
• Modern browser with CSS Grid support

Browser Support

| Browser | Support | |---------|---------| | Chrome 90+ | ✅ | | Firefox 88+ | ✅ | | Safari 14+ | ✅ | | Edge 90+ | ✅ |

1.0.0

• Added white light theme for AvTimePicker and AvTimePickerInput
• Fixed setValue() not displaying in the text field (now accepts "HH:MM" without AM/PM)
• Fixed theme CSS variables now set on :host(.theme-*) to ensure correct cascade in Angular's emulated encapsulation
• Fixed ngOnInit race condition overwriting values set via writeValue
• Added AvTimePickerInput popup input component with click-outside close, animations, and form integration
• Fixed SVG filter ID collisions when multiple picker instances are on the same page

License

This project is licensed under the MIT License - see the LICENSE file for details.

Authorship

| Field | Details | |-------|---------| | Author | Dileesha Ekanayake | | Email | [email protected] | | Year | 2026 | | Version | 1.0.0 | | License | MIT |