API ng Date picker · Needless UI

Import

import-date-picker.ts

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

Isang petsa, o petsa at oras, na tina-type ayon sa segment.

NuiDateField: Mga property
Pangalan	Uri	Default	Paglalarawan
`value`Two-way	`NuiDate \| NuiDateTime \| null`	`null`	Ang value, o null hanggang mapunan ang bawat segment.
`granularity`Input	`'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	Humihinto sa araw, o tumutuloy hanggang oras, minuto o segundo.
`min, max`Input	`string \| null`		Ang pinakamaaga at pinakahuling value. Sa labas ng mga ito, invalid ang field.
`placeholder`Input	`string \| null`	`now`	Kung saan nagsisimula ang mga walang lamang segment kapag ginamit ang mga arrow key.
`hourCycle`Input	`12 \| 24`		Isang 12- o 24-hour clock. Default ang sa locale.
`minuteStep`Input	`number`	`1`	Kung gaano kalayo inililipat ng mga arrow key ang minuto.
`disabled, readonly`Input	`boolean`	`false`	Pinipigilan ang mga pagbabago.
`locale`Input	`string`	`LOCALE_ID`	Itinatakda ang ayos, mga separator, mga digit at ang clock.
`labels`Input	`Partial<NuiDateFieldLabels>`		Bawat text na sinasabi ng field, para maisalin.
`invalid`Property	`Signal<boolean>`		Kung nasa labas ng `min` at `max` ang value.
`focus`Method	`() => void`		Inililipat ang focus sa unang walang lamang segment.

Isang oras ng araw na tina-type ayon sa segment. Pareho ang mga input nito sa date field.

NuiTimeField: Mga property
Pangalan	Uri	Default	Paglalarawan
`granularity`Input	`'hour' \| 'minute' \| 'second'`	`'minute'`	Humihinto sa oras, minuto o segundo.

Isang date field na may calendar sa popover. Tinatanggap nito ang mga input ng date field, at ang mga ito.

NuiDatePicker: Mga property
Pangalan	Uri	Paglalarawan
`unavailable`Input	`(date: NuiDate) => boolean`	Mga araw na hindi pipiliin ng calendar.
`firstDay, weekNumbers`Input	`1 … 7, boolean`	Ipinapasa sa calendar.
`labels`Input	`Partial<NuiDatePickerLabels>`	Ang mga text ng field, ng button at ng calendar.
`corners`Input	`NuiCorners`	Ang hugis ng mga sulok nito: `round`, `squircle`, `bevel`, `scoop`, `notch` o `square`.
`radius`Input	`NuiRadius`	Kung gaano kabilog ang mga sulok nito: `none`, `small`, `medium`, `large` o `full`.
`density`Input	`NuiDensity`	Kung gaano kalaking espasyo ang kinukuha nito: `compact`, `regular` o `roomy`.
`show`Method	`() => void`	Binubuksan ang calendar.

Sinusunod ng mga customization input na hindi mo sine-set ang pinakamalapit na data-nui-* attribute. Tingnan ang gabay sa pag-customize.

Dalawang date field na may range calendar. Tinatanggap nito ang mga input ng date picker, at ang mga ito.

NuiDateRangePicker: Mga property
Pangalan	Uri	Default	Paglalarawan
`value`Two-way	`NuiDateRange \| null`	`null`	Ang range, o null hanggang ma-set ang dalawang dulo, nang magkasunod.
`presets`Input	`NuiDateRangePreset[]`	`[]`	Mga range na may pangalan, na mapipili sa isang click.
`months`Input	`number`	`2`	Ilang buwan ang magkakatabi sa calendar.

Isang range na may pangalan, fixed o ginagawa kapag pinili.

NuiDateRangePreset: Mga property
Pangalan	Uri	Default	Paglalarawan
`label`Property	`string`		Ang pangalan nito.
`range`Property	`NuiDateRange \| (() => NuiDateRange)`		Ang range, o isang function na gumagawa nito.