upp-date

A date selector component that opens a modal and supports two input modes:

• manual typing (DD/MM/YYYY)
• calendar selection (mat-calendar)

It is designed to work consistently on mobile and desktop, uses a full-screen modal on mobile, and supports Angular Reactive Forms through ControlValueAccessor.

When to Use

• You need date selection with both keyboard and calendar interaction.
• You want a reusable widget instead of repeating ad-hoc date modal code.
• You need form integration with formControlName.

Demo

Source Code

HTML

<ion-item lines="none" [formGroup]="form">
    <upp-date
        formControlName="date"
        title="Start date"
        placeholder="DD/MM/YYYY"
    ></upp-date>
</ion-item>

TypeScript

form = new FormGroup({
    date: new FormControl('04/04/2026')
});

SCSS

upp-date {
    width: 100%;
}

API Reference

UppDateComponent (upp-date, alias upp-date-picker)

Property	Type	Default	Description
formControlName	string	''	Form control name in a parent FormGroup.
disabled	boolean	false	Disables opening the picker.
placeholder	string	''	Placeholder when no date is selected.
title	string	''	Title shown in trigger and modal header.
min	string | null	null	Minimum date in ISO format (YYYY-MM-DD) for the calendar.
max	string | null	null	Maximum date in ISO format (YYYY-MM-DD) for the calendar.
icon	string	'calendar-clear-outline'	Ionicon name shown on the trigger button.

Outputs

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