API du composant Sélecteur de date

Import

import-date-picker.ts

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

Une date, ou une date et une heure, saisie par segments.

NuiDateField: Propriétés
Nom	Type	Par défaut	Description
`value`Bidirectionnel	`NuiDate \| NuiDateTime \| null`	`null`	La valeur, ou null tant que tous les segments ne sont pas remplis.
`granularity`Input	`'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	S’arrête au jour, ou va jusqu’à l’heure, la minute ou la seconde.
`min, max`Input	`string \| null`		La première et la dernière valeur autorisées. En dehors de ces bornes, le champ est invalide.
`placeholder`Input	`string \| null`	`now`	Le point de départ des segments vides avec les flèches.
`hourCycle`Input	`12 \| 24`		Une horloge de 12 ou 24 heures. Par défaut, celle des paramètres régionaux.
`minuteStep`Input	`number`	`1`	De combien les flèches déplacent les minutes.
`disabled, readonly`Input	`boolean`	`false`	Empêchent les modifications.
`locale`Input	`string`	`LOCALE_ID`	Définit l’ordre, les séparateurs, les chiffres et l’horloge.
`labels`Input	`Partial<NuiDateFieldLabels>`		Tous les textes que le champ annonce, à traduire.
`invalid`Propriété	`Signal<boolean>`		Indique si la valeur est en dehors de `min` et `max`.
`focus`Méthode	`() => void`		Place le focus sur le premier segment vide.

Une heure de la journée saisie par segments. Il accepte les mêmes inputs que le champ de date.

NuiTimeField: Propriétés
Nom	Type	Par défaut	Description
`granularity`Input	`'hour' \| 'minute' \| 'second'`	`'minute'`	S’arrête à l’heure, à la minute ou à la seconde.

Un champ de date avec un calendrier dans un popover. Il accepte les inputs du champ de date, et ceux-ci.

NuiDatePicker: Propriétés
Nom	Type	Description
`unavailable`Input	`(date: NuiDate) => boolean`	Les jours que le calendrier ne laisse pas choisir.
`firstDay, weekNumbers`Input	`1 … 7, boolean`	Transmis au calendrier.
`labels`Input	`Partial<NuiDatePickerLabels>`	Les textes du champ, du bouton et du calendrier.
`corners`Input	`NuiCorners`	La forme de ses coins : `round`, `squircle`, `bevel`, `scoop`, `notch` ou `square`.
`radius`Input	`NuiRadius`	La taille de ses coins : `none`, `small`, `medium`, `large` ou `full`.
`density`Input	`NuiDensity`	La place qu’il occupe : `compact`, `regular` ou `roomy`.
`show`Méthode	`() => void`	Ouvre le calendrier.

Les inputs de personnalisation que vous ne définissez pas suivent l’attribut data-nui-* le plus proche. Consultez le guide de personnalisation.

Deux champs de date avec un calendrier de plage. Il accepte les inputs du sélecteur de date, et ceux-ci.

NuiDateRangePicker: Propriétés
Nom	Type	Par défaut	Description
`value`Bidirectionnel	`NuiDateRange \| null`	`null`	La plage, ou null tant que les deux bornes ne sont pas définies, dans l’ordre.
`presets`Input	`NuiDateRangePreset[]`	`[]`	Des plages nommées, à choisir en un clic.
`months`Input	`number`	`2`	Mois côte à côte dans le calendrier.

Une plage nommée, fixe ou calculée au moment du choix.

NuiDateRangePreset: Propriétés
Nom	Type	Par défaut	Description
`label`Propriété	`string`		Son nom.
`range`Propriété	`NuiDateRange \| (() => NuiDateRange)`		La plage, ou une fonction qui la crée.