upp-time

A time selector component that opens a modal with:

• up/down controls for hour and minute
• manual typing in each field
• optional vertical swipe to change values faster

It is designed for touch-first flows and supports Angular Reactive Forms through ControlValueAccessor.

When to Use

• You need a reusable HH:mm picker with large typography.
• You want both tactile controls (buttons/swipe) and direct text editing.
• You need form integration with formControlName.

Demo

Source Code

HTML

<ion-item lines="none" [formGroup]="form">
    <upp-time
        formControlName="time"
        title="Start time"
        placeholder="HH:mm"
        [step]="5"
        [swipeEnabled]="swipeEnabled"
        [swipeThreshold]="12"
    ></upp-time>
</ion-item>

TypeScript

form = new FormGroup({
    time: new FormControl('09:30')
});

swipeEnabled = true;

SCSS

upp-time {
    width: 100%;
}

API Reference

UppTimeComponent (upp-time, alias upp-time-picker)

Property	Type	Default	Description
formControlName	string	''	Form control name in a parent FormGroup.
disabled	boolean	false	Disables opening the picker.
placeholder	string	''	Placeholder shown when no time is selected.
title	string	''	Title shown in trigger and modal header.
icon	string	'time-outline'	Ionicon name shown on the trigger button.
min	string | null	null	Minimum allowed time (HH:mm).
max	string | null	null	Maximum allowed time (HH:mm).
step	number	1	Minute increment/decrement step.
swipeEnabled	boolean	true	Enables vertical swipe for fast changes.
swipeThreshold	number	14	Vertical pixels required per swipe step.

Outputs

Event	Payload	Description
Changed	string | null	Emitted when the selected time changes.