Date Input | Neural Native

Import

component.ts

import { NeuDateInputComponent } from '@neural-ui/native/date-input';

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Good work needs a moment

Choose a day with the real date picker. The meeting draft updates immediately; saving snapshots that date into a separate local summary, which stays intact when the draft changes. No invitation is sent.

View and copy the complete example

basic.component.ts

import { Component, signal, computed } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuAvatarGroupComponent } from '@neural-ui/native/avatar-group';
import { NeuDateInputComponent } from '@neural-ui/native/date-input';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuBadgeComponent, NeuAvatarGroupComponent, NeuDateInputComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="false"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Good work needs a moment</text><text class="product-caption">A little room to think together</text></view>
    <view class="review-preview"><view class="product-row"><view class="review-date"><text class="review-date-day">{{ dateDay() }}</text><text class="review-date-month">{{ dateMonth() }}</text></view><view class="product-copy"><text class="review-kicker">MEETING DRAFT</text><text class="review-title">Design critique</text><text class="review-detail">10:00–10:30 · Studio room</text></view></view>
    <view class="product-row"><neu-avatar-group [items]="reviewers" size="sm" [max]="3" /><view class="product-copy"><text class="review-detail">Three perspectives. One better idea.</text></view></view></view>
    <view class="product-surface"><neu-date-input label="Next meeting" locale="en" [(value)]="date" /><text class="product-caption">Choose a day for an open, thoughtful review of the next release.</text>
    <neu-button label="Save meeting locally" [disabled]="!date()" (pressed)="planned.set(date())" /></view>
    @if (planned()) { <view class="saved-review"><neu-badge label="Saved draft" tone="success" /><text class="product-heading">{{ plannedLabel() }}</text><text class="product-caption">10:00–10:30 · Saved on this screen. No invitation sent.</text></view> }</view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
.review-preview { gap: 22px; padding: 20px; border-radius: 18px; background-color: #eeeaf7; }
.review-date { width: 58px; gap: 2px; align-items: center; padding: 10px 4px; border-radius: 12px; background-color: #ffffff; }
.review-date-day { color: #493766; font-size: 28px; line-height: 32px; font-weight: 600; }
.review-date-month { color: #79668f; font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.6px; }
.review-kicker { color: #635076; font-size: 9px; line-height: 14px; font-weight: 600; letter-spacing: 0.8px; }
.review-title { color: #352847; font-size: 21px; line-height: 28px; font-weight: 600; }
.review-detail { color: #6c5d7c; font-size: 12px; line-height: 18px; }
.saved-review { gap: 10px; padding: 4px; }
  `,
})
export class ExampleComponent {
  readonly reviewLocale = 'en-US';
  readonly date = signal('2026-11-06');
  readonly planned = signal('');
  readonly reviewers = [{ id: 'alex', label: 'Alex Morgan' }, { id: 'ada', label: 'Ada Lovelace' }, { id: 'grace', label: 'Grace Hopper' }];
  private dateValue(value: string) { return new Date(value + 'T12:00:00'); }
  readonly dateDay = computed(() => this.date() ? new Intl.DateTimeFormat(this.reviewLocale, { day: '2-digit' }).format(this.dateValue(this.date())) : '—');
  readonly dateMonth = computed(() => this.date() ? new Intl.DateTimeFormat(this.reviewLocale, { month: 'short' }).format(this.dateValue(this.date())).toUpperCase() : '—');
  readonly plannedLabel = computed(() => this.planned() ? new Intl.DateTimeFormat(this.reviewLocale, { weekday: 'long', day: 'numeric', month: 'long' }).format(this.dateValue(this.planned())) : '');
}

Read-only and unavailable dates

Compare a confirmed date with a field that is not yet available.

View and copy the complete example

read-only-and-unavailable-dates.component.ts

import { Component, signal } from '@angular/core';
import { NeuDateInputComponent } from '@neural-ui/native/date-input';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuDateInputComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-date-input label="Booking confirmed" value="2026-10-21" locale="en" [readonly]="true" />
    <neu-date-input label="Waiting for availability" [disabled]="true" placeholder="Not available yet" />
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly date = signal('2026-10-16');
}

Date range

Choose a booking date between October and December 2026. Dates outside this interval are unavailable.

View and copy the complete example

date-range.component.ts

import { Component, signal } from '@angular/core';
import { NeuDateInputComponent } from '@neural-ui/native/date-input';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuDateInputComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-date-input label="Booking date" locale="en" [(value)]="bookingDate" min="2026-10-01" max="2026-12-31" />
    <text>Available from October to December 2026</text>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly bookingDate = signal('2026-10-16');
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Date Input · android · native capture — **Android**Native screenshot

Date Input · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
min	string	''	Input	Earliest allowed date as YYYY-MM-DD. An empty string leaves this boundary unset.
max	string	''	Input	Latest allowed date as YYYY-MM-DD. An empty string leaves this boundary unset.
locale	string	'en'	Input	Locale used for calendar or date formatting, such as en or es.
placeholder	string	'Choose date'	Input	Example or prompt displayed while the value is empty; keep a separate label.
closeLabel	string	'Close'	Input	Text or accessible name used for close. It does not perform the action by itself.
previousLabel	string	'Previous month'	Input	Text or accessible name used for previous. It does not perform the action by itself.
nextLabel	string	'Next month'	Input	Text or accessible name used for next. It does not perform the action by itself.
previousYearLabel	string	'Previous year'	Input	Accessible name for moving back one year in the month picker.
nextYearLabel	string	'Next year'	Input	Accessible name for advancing one year in the month picker.
previousYearsLabel	string	'Previous 12 years'	Input	Accessible name for the previous group of twelve years.
nextYearsLabel	string	'Next 12 years'	Input	Accessible name for the next group of twelve years.
label	string	Required	Input	Human-readable name for the control, action or group.
disabled	boolean	false	Input	Disables user interaction. Values can still be supplied by the application.
readonly	boolean	false	Input	Prevents user editing or selection while retaining the current value.
invalid	boolean	false	Input	Marks the control invalid. Your form or application supplies the validation rule.
touched	boolean	false	Input	Field interaction state, supplied manually or through Signal Forms.
hint	string	''	Input	Field guidance shown when no error message is being displayed.
required	boolean	false	Input	Required-field presentation. Define the actual validation rule in your application form.
requiredLabel	string	'Required'	Input	Localized requirement announced with the field hint when required is true. Defaults to Required; it does not validate the value.
error	string	''	Input	Application-provided error message; combine it with the control’s invalid state.

Models

Name	Type	Default	Binding	Description
value	string	''	Model · two-way	Current edited value or selected ID(s), using the declared type. Bind a writable signal with [(value)].

Outputs

Name	Payload	When it emits
valueChange	string	Emits the updated value value. [(value)] binds this output together with its model input.
touch	void	Reports user interaction to the surrounding form or application.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

import { signal } from '@angular/core';

// Fields inside your component class
readonly value = signal<string>('');