DateInput

Elegir una fecha

Usa DateInput para una fecha de entrega, la hora de una cita o un intervalo. Importa el componente y guarda el valor en un signal; no necesitas un adaptador de fechas ni un paquete de iconos. Pulsa en cualquier parte del campo para abrir el selector, o utiliza el botón de la flecha.

CivilDate representa un día del calendario, no un instante. civilDate('2026-10-15') valida ese valor sin añadir una zona horaria. Conserva el valor civil al enviarlo a tu aplicación; conviértelo en un instante solo cuando tus reglas de negocio indiquen una hora y una zona horaria.

Configurador

Explora los siete modos de valor, la presentación desplegable o integrada, el tamaño y las opciones del calendario. Al cambiar de modo, el valor de la demo se restablece al tipo público correspondiente; el template generado refleja tus ajustes.

"2026-10-15"

null

<neu-date-input
  [(value)]="value"
  (viewChange)="lastViewChange.set($event)"
  label="Fecha de entrega"
  mode="date"
  presentation="overlay"
  size="md"
  [floatingLabel]="true"
  [firstDayOfWeek]="1"
  [showWeekNumbers]="false"
  [showMonthYearPicker]="true"
  [locale]="'es'"
/>

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

export const value = signal("2026-10-15");

Modos y tipos de valor

Elige el modo según el valor que necesitas guardar. date usa CivilDate (2026-10-15); time usa LocalTime (09:30); datetime usa LocalDateTime (2026-10-15T09:30). Ninguno representa un instante UTC.

Usa multiple para días independientes (readonly CivilDate[]). Usa range para un intervalo (CivilDateRange con start y end); un intervalo a medio seleccionar puede tener un extremo null. month usa CivilMonth y year usa CivilYear cuando no necesitas precisión de día. Cada ejemplo mantiene su propio valor con el tipo correspondiente.

Límites y presentación

Esta ventana de entrega admite del 10 al 20 de octubre de 2026, excepto el día 17. min y max limitan la fecha civil; disabledDates excluye un día concreto. Prueba a escribir una fecha fuera del intervalo y abre el calendario para comparar ambas formas de entrada.

Los interruptores permiten explorar deshabilitado, solo lectura y presentación integrada sin exponer APIs de objetos ajenas al ejemplo. Conserva el tipo de valor propio de cada modo; cambiar el modo de un formulario puede requerir cambiar o limpiar su modelo.

Validación con Signal Forms

Conecta FormField a un campo tipado. El esquema aporta la validación obligatoria y los estados deshabilitado y solo lectura; no necesitas enlazar el valor por segunda vez. Sal del campo vacío para mostrar el error. Restablecer limpia el valor y el estado de interacción del formulario.

Usa min, max y disabledDates para restringir las fechas seleccionables. Mantén la validación de negocio en el esquema del formulario y aporta un mensaje que explique cómo corregir un valor no válido.

Valor y eventos

value es un modelo bidireccional: [(value)] sincroniza el valor civil seleccionado con tu signal. En un formulario con Signal Forms, FormField realiza esa conexión. No combines ambos enlaces en el mismo control.

opened y closed informan del ciclo del panel. cleared comunica la acción de limpiar y touch la interacción con el campo. viewChange informa de la vista del calendario; no de una nueva fecha seleccionada. Usa valueChange cuando tu aplicación necesite el nuevo valor.

Accesibilidad y teclado

Core gestiona la cuadrícula del calendario, la navegación por teclado y el foco del panel. Tu aplicación debe aportar una etiqueta y un mensaje de validación útiles, y asociar ayuda adicional mediante ariaDescribedBy. El placeholder no sustituye a una etiqueta.

Los campos deshabilitados no se pueden editar; los de solo lectura conservan su valor sin admitir cambios. Comprueba el formulario completo con tu contenido y tecnología de asistencia, especialmente los avisos de error y la recuperación del foco al cerrar el panel.

API

La exportación pública NeuDateInputComponent es un alias de NeuDateInputControl. Configura el control mediante inputs, conecta el modelo value y escucha outputs cuando necesites avisos de interacción. Este control no expone directivas de plantilla ni métodos imperativos de consumo.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Models

Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { CivilDate } from '@neural-ui/core/date-input';

// Declaración pública (solo referencia)
export type CivilDate = string & {
    readonly [civilDateBrand]: true;
};

import type { CivilDate } from '@neural-ui/core/date-input';

import type { CivilDateRange } from '@neural-ui/core/date-input';

// Declaración pública (solo referencia)
export interface CivilDateRange {
  readonly end: CivilDate | null;
  readonly start: CivilDate | null;
}

import type { CivilMonth } from '@neural-ui/core/date-input';

// Declaración pública (solo referencia)
export interface CivilMonth {
  readonly month: number;
  readonly year: number;
}

import type { CivilYear } from '@neural-ui/core/date-input';

// Declaración pública (solo referencia)
export interface CivilYear {
  readonly year: number;
}

import type { LocalDateTime } from '@neural-ui/core/date-input';

// Declaración pública (solo referencia)
export type LocalDateTime = string & {
    readonly [localDateTimeBrand]: true;
};

import type { LocalTime } from '@neural-ui/core/date-input';

// Declaración pública (solo referencia)
export type LocalTime = string & {
    readonly [localTimeBrand]: true;
};

import type { CivilDate } from '@neural-ui/core/date-input';
import type { CivilMonth } from '@neural-ui/core/date-input';
import type { CivilYear } from '@neural-ui/core/date-input';
import type { LocalDateTime } from '@neural-ui/core/date-input';
import type { LocalTime } from '@neural-ui/core/date-input';
import type { NeuDateMode } from '@neural-ui/core/date-input';

import type { NeuDateBoundary } from '@neural-ui/core/date-input';

// Declaración pública (solo referencia)
export type NeuDateBoundary<M extends NeuDateMode> = M extends 'time' ? LocalTime : M extends 'datetime' ? LocalDateTime : M extends 'month' ? CivilMonth : M extends 'year' ? CivilYear : CivilDate;

import type { NeuDateMode } from '@neural-ui/core/date-input';
import type { NeuDateValue } from '@neural-ui/core/date-input';

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

// Declaración pública (solo referencia)
export type NeuDateInputComponent<M extends NeuDateMode = 'date'> = NeuDateInputControl<NeuDateValue<M>>;
const NeuDateInputComponent: typeof NeuDateInputControl;

import type { NeuDateMode } from '@neural-ui/core/date-input';

// Declaración pública (solo referencia)
export type NeuDateMode = 'date' | 'time' | 'datetime' | 'multiple' | 'range' | 'month' | 'year';

import type { NeuDatePresentation } from '@neural-ui/core/date-input';

// Declaración pública (solo referencia)
export type NeuDatePresentation = 'overlay' | 'inline';

import type { CivilDateRange } from '@neural-ui/core/date-input';

import type { NeuDatePreset } from '@neural-ui/core/date-input';

// Declaración pública (solo referencia)
interface NeuDatePreset {
  readonly label: string;
  readonly range: CivilDateRange | (() => CivilDateRange);
}

import type { NeuDateMode } from '@neural-ui/core/date-input';
import type { NeuDateValueMap } from '@neural-ui/core/date-input';

import type { NeuDateValue } from '@neural-ui/core/date-input';

// Declaración pública (solo referencia)
export type NeuDateValue<M extends NeuDateMode> = NeuDateValueMap[M];

import type { CivilDate } from '@neural-ui/core/date-input';
import type { CivilDateRange } from '@neural-ui/core/date-input';
import type { CivilMonth } from '@neural-ui/core/date-input';
import type { CivilYear } from '@neural-ui/core/date-input';
import type { LocalDateTime } from '@neural-ui/core/date-input';
import type { LocalTime } from '@neural-ui/core/date-input';

import type { NeuDateValueMap } from '@neural-ui/core/date-input';

// Declaración pública (solo referencia)
export interface NeuDateValueMap {
  readonly date: CivilDate | null;
  readonly datetime: LocalDateTime | null;
  readonly month: CivilMonth | null;
  readonly multiple: readonly CivilDate[];
  readonly range: CivilDateRange;
  readonly time: LocalTime | null;
  readonly year: CivilYear | null;
}

import type { CivilDate } from '@neural-ui/core/date-input';

import type { NeuDateViewChangeEvent } from '@neural-ui/core/date-input';

// Declaración pública (solo referencia)
interface NeuDateViewChangeEvent {
  readonly end: CivilDate;
  readonly start: CivilDate;
}

Tematización

DateInput usa los roles compartidos de campo, superficie, texto y foco, no una paleta exclusiva de fechas. Este contenedor local cambia borde, superficie y texto de un campo; el campo contiguo conserva el tema heredado.

Un token compartido también afecta a otros controles Neural dentro del mismo contenedor. Limita el ámbito de los cambios, conserva el contraste del texto y del foco y revisa tanto el calendario abierto como el campo cerrado.

Componentes relacionados

Usa Input para texto libre en lugar de una fecha u hora civil.

• Input
• Textarea
• Checkbox