API der Komponente Datumsauswahl

Import

import-date-picker.ts

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

Ein Datum oder Datum mit Uhrzeit, in Segmenten eingetippt.

NuiDateField: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`value`Two-Way	`NuiDate \| NuiDateTime \| null`	`null`	Der Wert oder null, bis alle Segmente ausgefüllt sind.
`granularity`Input	`'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	Endet beim Tag oder reicht bis zur Stunde, Minute oder Sekunde.
`min, max`Input	`string \| null`		Der früheste und der späteste Wert. Außerhalb davon ist das Feld ungültig.
`placeholder`Input	`string \| null`	`now`	Der Ausgangswert leerer Segmente für die Pfeiltasten.
`hourCycle`Input	`12 \| 24`		Eine 12- oder 24-Stunden-Uhr. Standardmäßig die der Locale.
`minuteStep`Input	`number`	`1`	Wie weit die Pfeiltasten die Minuten verstellen.
`disabled, readonly`Input	`boolean`	`false`	Verhindern Änderungen.
`locale`Input	`string`	`LOCALE_ID`	Bestimmt Reihenfolge, Trennzeichen, Ziffern und Uhrformat.
`labels`Input	`Partial<NuiDateFieldLabels>`		Alle Texte, die das Feld ansagt, zum Übersetzen.
`invalid`Eigenschaft	`Signal<boolean>`		Ob der Wert außerhalb von `min` und `max` liegt.
`focus`Methode	`() => void`		Fokussiert das erste leere Segment.

Eine Uhrzeit, in Segmenten eingetippt. Nimmt dieselben Inputs wie das Datumsfeld.

NuiTimeField: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`granularity`Input	`'hour' \| 'minute' \| 'second'`	`'minute'`	Endet bei der Stunde, Minute oder Sekunde.

Ein Datumsfeld mit einem Kalender im Popover. Nimmt die Inputs des Datumsfelds und zusätzlich diese.

NuiDatePicker: Eigenschaften
Name	Typ	Beschreibung
`unavailable`Input	`(date: NuiDate) => boolean`	Tage, die sich im Kalender nicht wählen lassen.
`firstDay, weekNumbers`Input	`1 … 7, boolean`	Werden an den Kalender weitergegeben.
`labels`Input	`Partial<NuiDatePickerLabels>`	Die Texte von Feld, Button und Kalender.
`corners`Input	`NuiCorners`	Die Form der Ecken: `round`, `squircle`, `bevel`, `scoop`, `notch` oder `square`.
`radius`Input	`NuiRadius`	Wie groß die Ecken sind: `none`, `small`, `medium`, `large` oder `full`.
`density`Input	`NuiDensity`	Wie viel Platz die Komponente einnimmt: `compact`, `regular` oder `roomy`.
`show`Methode	`() => void`	Öffnet den Kalender.

Anpassungs-Inputs, die du nicht setzt, richten sich nach dem nächstgelegenen data-nui-*-Attribut. Mehr dazu in der Anleitung zur Anpassung.

Zwei Datumsfelder mit einem Kalender für Zeiträume. Nimmt die Inputs der Datumsauswahl und zusätzlich diese.

NuiDateRangePicker: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`value`Two-Way	`NuiDateRange \| null`	`null`	Der Zeitraum oder null, bis beide Enden in der richtigen Reihenfolge gesetzt sind.
`presets`Input	`NuiDateRangePreset[]`	`[]`	Benannte Zeiträume, mit einem Klick wählbar.
`months`Input	`number`	`2`	Monate nebeneinander im Kalender.

Ein benannter Zeitraum, fest oder erst bei der Auswahl berechnet.

NuiDateRangePreset: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`label`Eigenschaft	`string`		Sein Name.
`range`Eigenschaft	`NuiDateRange \| (() => NuiDateRange)`		Der Zeitraum oder eine Funktion, die ihn erzeugt.