Overview
tng-datepicker is a date input that implements ControlValueAccessor. It provides a text input (with smart parsing), a calendar toggle, and an overlay calendar with month/year navigation. Value is Date | null. Optional min and max constrain the selectable range.
Quick example
Basic
<form [formGroup]="form">
<tng-datepicker formControlName="period" [min]="min" [max]="max" />
</form>
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { TngDatepicker } from '@tailng-ui/ui/form';
@Component({
selector: 'datepicker-demo',
standalone: true,
imports: [ReactiveFormsModule, TngDatepicker],
template: `<form [formGroup]="form">
<tng-datepicker formControlName="period" [min]="min" [max]="max" />
</form>`,
})
export class DatepickerDemoComponent {
min = new Date(2020, 0, 1);
max = new Date(2030, 11, 31);
form = new FormGroup({
period: new FormControl<Date | null>(null, { nonNullable: false }),
});
}
Value: Feb 17, 2026
Features
min / max
Optional Date | null to restrict the selectable range.
displayFormat / previewFormat
Input and panel preview format (e.g. DD/MM/YYYY, DD MMM YYYY). Supports locale.
Slot hooks
slot keys: input, toggle, panel, and many panel sub-elements for full theming.