# Datetime
Use `ui-datetime` when users need one exact appointment or event moment rather than separate date and time fields. It works well for interviews, approvals, bookings, reminders, and any workflow where the final value needs both the day and the time.
## Import
```ts
import { DatetimeComponent } from 'ui';
```
## Basic date and time selection
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ButtonComponent, DatetimeComponent } from 'ui';
@Component({
selector: 'app-datetime-basic-demo',
standalone: true,
imports: [FormsModule, ButtonComponent, DatetimeComponent],
template: `
Clear
{{ value || 'No date and time selected.' }}
`,
})
export class DatetimeBasicDemoComponent {
protected value = '2026-05-12T09:30';
}
```
## Time step and 12h or 24h clock
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatetimeComponent } from 'ui';
@Component({
selector: 'app-datetime-step-format-demo',
standalone: true,
imports: [FormsModule, DatetimeComponent],
template: `
24h example: 16:30
12h picker shows the same slot as
4:30 PM
`,
})
export class DatetimeStepFormatDemoComponent {
protected halfHourValue = '2026-05-12T09:30';
protected quarterHourValue = '2026-05-12T13:15';
protected twelveHourValue = '2026-05-12T16:30';
}
```
## Min and max constraints
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatetimeComponent } from 'ui';
@Component({
selector: 'app-datetime-constraints-demo',
standalone: true,
imports: [FormsModule, DatetimeComponent],
template: `
Allowed window: 2026-05-12 08:00 to 18:00
Selected: {{ value || 'None' }}
`,
})
export class DatetimeConstraintsDemoComponent {
protected value = '2026-05-12T10:00';
}
```
## Size and field states
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatetimeComponent } from 'ui';
@Component({
selector: 'app-datetime-states-demo',
standalone: true,
imports: [FormsModule, DatetimeComponent],
template: `
`,
})
export class DatetimeStatesDemoComponent {
protected smallValue = '2026-05-12T09:00';
protected readonlyValue = '2026-05-14T15:30';
protected disabledValue = '2026-05-16T11:00';
protected requiredValue = '';
}
```
## Reactive form integration
```ts
import { Component, computed } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { ButtonComponent, DatetimeComponent, MessageBarComponent } from 'ui';
@Component({
selector: 'app-datetime-reactive-form-demo',
standalone: true,
imports: [ReactiveFormsModule, ButtonComponent, DatetimeComponent, MessageBarComponent],
template: `
Approval call
Datetime usually matters inside a real scheduling flow with validation and submit state.
@if (datetimeControl.invalid && datetimeControl.touched) {
}
Save schedule
Reset
{{ summary() }}
`,
})
export class DatetimeReactiveFormDemoComponent {
protected readonly datetimeControl = new FormControl('2026-05-14T11:00', {
nonNullable: false,
validators: [Validators.required],
});
protected readonly summary = computed(
() => this.datetimeControl.value || 'No date and time selected.',
);
protected reset(): void {
this.datetimeControl.reset('2026-05-14T11:00');
}
}
```
## Scheduling panel composition
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ButtonComponent, DatetimeComponent, MessageBarComponent, TagComponent } from 'ui';
@Component({
selector: 'app-datetime-scheduling-panel-demo',
standalone: true,
imports: [FormsModule, ButtonComponent, DatetimeComponent, MessageBarComponent, TagComponent],
template: `
Interview scheduling
Datetime is strongest when users need one precise appointment slot with both date and
time context.
Selected slot
{{ value || 'Not selected' }}
Send invite
Reset
`,
})
export class DatetimeSchedulingPanelDemoComponent {
protected value = '2026-05-15T14:30';
}
```
## Accessibility
### Input and popup behavior
`ui-datetime` behaves like a text field on desktop and can fall back to a native `type="datetime-local"` input on mobile when `useNativeOnMobile` is enabled.
| Mode | Behavior |
| --- | --- |
| desktop text input | exposes `aria-haspopup="dialog"` and `aria-expanded` |
| mobile native datetime input | relies on native platform datetime semantics |
| disabled or readonly | prevents opening or changing the value |
### Keyboard
Keyboard handling follows the shared field and popup model.
| Key | Action |
| --- | --- |
| `Tab` / `Shift+Tab` | moves through the field, calendar controls, and time picker |
| `Enter` / click on trigger actions | opens the combined picker panel on desktop |
| button activation | selects a date, changes panel navigation, or runs footer actions like clear or now |
### Labels and guidance
Use a label that explains the real task, such as interview slot, approval time, or meeting start. If there is a timezone assumption or a narrow booking window, add helper text or nearby status copy so users understand the expected datetime context.