Saltar al contenido principal
Neural Nativev0.1.0-beta.1Documentación

Selección

Date Input

Elige una fecha desde un campo que abre el calendario de Neural en una hoja inferior.

Angular NativeiOS / Android0.1.0-beta.1

Importación

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

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

El buen trabajo necesita su momento

Elige un día con el selector real. El borrador se actualiza al momento; guardar conserva esa fecha en un resumen local independiente, que se mantiene al cambiar el borrador. No se envía ninguna invitación.

Ver y copiar el ejemplo completo
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">El buen trabajo necesita su momento</text><text class="product-caption">Un espacio para pensar en equipo</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">BORRADOR DE REUNIÓN</text><text class="review-title">Crítica de diseño</text><text class="review-detail">10:00–10:30 · Sala del estudio</text></view></view>
    <view class="product-row"><neu-avatar-group [items]="reviewers" size="sm" [max]="3" /><view class="product-copy"><text class="review-detail">Tres perspectivas. Una idea mejor.</text></view></view></view>
    <view class="product-surface"><neu-date-input nextYearsLabel="12 años siguientes" previousYearsLabel="12 años anteriores" nextYearLabel="Año siguiente" previousYearLabel="Año anterior" nextLabel="Mes siguiente" previousLabel="Mes anterior" closeLabel="Cerrar calendario" label="Próxima reunión" locale="es" [(value)]="date" /><text class="product-caption">Elige un día para revisar con calma el próximo lanzamiento.</text>
    <neu-button label="Guardar reunión localmente" [disabled]="!date()" (pressed)="planned.set(date())" /></view>
    @if (planned()) { <view class="saved-review"><neu-badge label="Borrador guardado" tone="success" /><text class="product-heading">{{ plannedLabel() }}</text><text class="product-caption">10:00–10:30 · Guardado en esta pantalla. No se envía invitación.</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 = 'es-ES';
  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())) : '');
}

Fechas de solo lectura y desactivadas

Compara una fecha confirmada con un campo que todavía no está disponible.

Ver y copiar el ejemplo completo
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 nextYearsLabel="12 años siguientes" previousYearsLabel="12 años anteriores" nextYearLabel="Año siguiente" previousYearLabel="Año anterior" nextLabel="Mes siguiente" previousLabel="Mes anterior" closeLabel="Cerrar calendario" label="Reserva confirmada" value="2026-10-21" locale="es" [readonly]="true" />
    <neu-date-input nextYearsLabel="12 años siguientes" previousYearsLabel="12 años anteriores" nextYearLabel="Año siguiente" previousYearLabel="Año anterior" nextLabel="Mes siguiente" previousLabel="Mes anterior" closeLabel="Cerrar calendario" label="Esperando disponibilidad" [disabled]="true" placeholder="Todavía no disponible" />
    </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');
}

Intervalo de fechas

Elige una reserva entre octubre y diciembre de 2026. Las fechas fuera de ese intervalo no están disponibles.

Ver y copiar el ejemplo completo
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 nextYearsLabel="12 años siguientes" previousYearsLabel="12 años anteriores" nextYearLabel="Año siguiente" previousYearLabel="Año anterior" nextLabel="Mes siguiente" previousLabel="Mes anterior" closeLabel="Cerrar calendario" label="Fecha de reserva" locale="es" [(value)]="bookingDate" min="2026-10-01" max="2026-12-31" />
    <text>Disponible de octubre a diciembre de 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');
}
Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Date Input · android · native capture
AndroidCaptura nativa
Date Input · ios · native capture
iOSCaptura nativa

Referencia API

Inputs

NombreTipoPredeterminadoEnlaceDescripción
minstring''InputFecha mínima admitida en formato YYYY-MM-DD. Un string vacío deja este límite sin definir.
maxstring''InputFecha máxima admitida en formato YYYY-MM-DD. Un string vacío deja este límite sin definir.
localestring'en'InputLocale utilizado para el calendario o formato de fechas, por ejemplo en o es.
placeholderstring'Choose date'InputEjemplo o indicación mientras el valor está vacío; conserva una etiqueta independiente.
closeLabelstring'Close'InputTexto o nombre accesible utilizado para cerrar. No ejecuta la acción por sí solo.
previousLabelstring'Previous month'InputTexto o nombre accesible utilizado para anterior. No ejecuta la acción por sí solo.
nextLabelstring'Next month'InputTexto o nombre accesible utilizado para siguiente. No ejecuta la acción por sí solo.
previousYearLabelstring'Previous year'InputNombre accesible para retroceder un año en el selector de meses.
nextYearLabelstring'Next year'InputNombre accesible para avanzar un año en el selector de meses.
previousYearsLabelstring'Previous 12 years'InputNombre accesible del grupo anterior de doce años.
nextYearsLabelstring'Next 12 years'InputNombre accesible del grupo siguiente de doce años.
labelstringObligatorioInputNombre legible del control, acción o grupo.
disabledbooleanfalseInputDesactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.
readonlybooleanfalseInputImpide editar o seleccionar desde el control y conserva el valor actual.
invalidbooleanfalseInputMarca el control como inválido. El formulario o la aplicación aporta la regla de validación.
touchedbooleanfalseInputEstado de interacción con el campo, aportado manualmente o mediante Signal Forms.
hintstring''InputAyuda del campo que aparece cuando no se muestra un mensaje de error.
requiredbooleanfalseInputPresentación de campo obligatorio. Define la regla de validación real en el formulario de tu aplicación.
requiredLabelstring'Required'InputRequisito traducido que se anuncia con la ayuda cuando required es true. Required por defecto; no valida el valor.
errorstring''InputMensaje de error aportado por la aplicación; combínalo con el estado invalid del control.

Models

NombreTipoPredeterminadoEnlaceDescripción
valuestring''Model · bidireccionalValor editado o ID(s) seleccionado(s), según el tipo declarado. Enlaza una signal escribible mediante [(value)].

Outputs

NombrePayloadCuándo se emite
valueChangestringEmite el valor actualizado de value. [(value)] enlaza este output junto con su input model.
touchvoidComunica la interacción del usuario al formulario o aplicación que lo contiene.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts
import { signal } from '@angular/core';

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