API del componente Selector de fecha

Importación

import-date-picker.ts

import {
  NuiDateField,
  NuiDatePicker,
  NuiDateRangePicker,
  NuiTimeField,
} from '@needless-ui/angular/date-picker';

Una fecha, o una fecha y hora, escrita por segmentos.

NuiDateField: Propiedades
Nombre	Tipo	Predeterminado	Descripción
`value`Bidireccional	`NuiDate \| NuiDateTime \| null`	`null`	El valor, o null hasta que se rellenan todos los segmentos.
`granularity`Input	`'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	Se detiene en el día, o sigue hasta la hora, el minuto o el segundo.
`min, max`Input	`string \| null`		El valor más temprano y el más tardío. Fuera de esos límites, el campo no es válido.
`placeholder`Input	`string \| null`	`now`	El punto de partida de los segmentos vacíos al usar las flechas.
`hourCycle`Input	`12 \| 24`		Un reloj de 12 o 24 horas. Por defecto, el de la configuración regional.
`minuteStep`Input	`number`	`1`	Cuánto mueven las flechas los minutos.
`disabled, readonly`Input	`boolean`	`false`	Impiden los cambios.
`locale`Input	`string`	`LOCALE_ID`	Define el orden, los separadores, los dígitos y el reloj.
`labels`Input	`Partial<NuiDateFieldLabels>`		Todos los textos que anuncia el campo, para traducirlos.
`invalid`Propiedad	`Signal<boolean>`		Si el valor está fuera de `min` y `max`.
`focus`Método	`() => void`		Pone el foco en el primer segmento vacío.

Una hora del día escrita por segmentos. Acepta los mismos inputs que el campo de fecha.

NuiTimeField: Propiedades
Nombre	Tipo	Predeterminado	Descripción
`granularity`Input	`'hour' \| 'minute' \| 'second'`	`'minute'`	Se detiene en la hora, el minuto o el segundo.

Un campo de fecha con un calendario en un popover. Acepta los inputs del campo de fecha, y estos.

NuiDatePicker: Propiedades
Nombre	Tipo	Descripción
`unavailable`Input	`(date: NuiDate) => boolean`	Días que el calendario no deja elegir.
`firstDay, weekNumbers`Input	`1 … 7, boolean`	Se pasan al calendario.
`labels`Input	`Partial<NuiDatePickerLabels>`	Los textos del campo, del botón y del calendario.
`corners`Input	`NuiCorners`	La forma de sus esquinas: `round`, `squircle`, `bevel`, `scoop`, `notch` o `square`.
`radius`Input	`NuiRadius`	El tamaño de sus esquinas: `none`, `small`, `medium`, `large` o `full`.
`density`Input	`NuiDensity`	Cuánto espacio ocupa: `compact`, `regular` o `roomy`.
`show`Método	`() => void`	Abre el calendario.

Los inputs de personalización que no definas siguen el atributo data-nui-* más cercano. Consulta la guía de personalización.

Dos campos de fecha con un calendario de rango. Acepta los inputs del selector de fecha, y estos.

NuiDateRangePicker: Propiedades
Nombre	Tipo	Predeterminado	Descripción
`value`Bidireccional	`NuiDateRange \| null`	`null`	El rango, o null hasta que se fijan ambos extremos, en orden.
`presets`Input	`NuiDateRangePreset[]`	`[]`	Rangos con nombre para elegir con un clic.
`months`Input	`number`	`2`	Meses lado a lado en el calendario.

Un rango con nombre, fijo o calculado al elegirlo.

NuiDateRangePreset: Propiedades
Nombre	Tipo	Predeterminado	Descripción
`label`Propiedad	`string`		Su nombre.
`range`Propiedad	`NuiDateRange \| (() => NuiDateRange)`		El rango, o una función que lo genera.