Needless UI

Komponen

Pamilih tanggal

Ketik tanggal utawa wektu per bagean, utawa pilih ing kalender.

Import

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

NuiDateField

Tanggal, utawa tanggal lan wektu, sing diketik per bagean.

Selector
nui-date-field
JenengJinisGawanKatrangan
valueRong arahNuiDate | NuiDateTime | nullnullNilaine, utawa null nganti kabeh bagean keisi.
granularityInput'day' | 'hour' | 'minute' | 'second''day'Mandheg ing dina, utawa terus nganti jam, menit utawa detik.
min, maxInputstring | nullNilai paling awal lan paling pungkasan. Ing njabane, kolom ora valid.
placeholderInputstring | nullnowTitik wiwitan bagean kosong nalika nganggo tombol panah.
hourCycleInput12 | 24Format 12 utawa 24 jam. Gawane, miturut locale.
minuteStepInputnumber1Sepira adohe tombol panah mindhah menit.
disabled, readonlyInputbooleanfalseNyegah owah-owahan.
localeInputstringLOCALE_IDNemtokake urutan, pamisah, angka lan format jam.
labelsInputPartial<NuiDateFieldLabels>Saben teks sing diucapake kolom, kanggo diterjemahake.
invalidPropertiSignal<boolean>Apa nilaine ana ing njaba min lan max.
focusMetode() => voidMenehi fokus marang bagean kosong kapisan.

NuiTimeField

Wektu ing sadina sing diketik per bagean. Nampa input sing padha karo kolom tanggal.

Selector
nui-time-field
JenengJinisGawanKatrangan
granularityInput'hour' | 'minute' | 'second''minute'Mandheg ing jam, menit utawa detik.

NuiDatePicker

Kolom tanggal kanthi kalender ing popover. Nampa input kolom tanggal, uga sing iki.

Selector
nui-date-picker
JenengJinisGawanKatrangan
unavailableInput(date: NuiDate) => booleanDina sing ora bakal dipilih kalender.
firstDay, weekNumbersInput1 … 7, booleanDiterusake menyang kalender.
labelsInputPartial<NuiDatePickerLabels>Teks kolom, tombol lan kalender.
cornersInputNuiCornersWangun pojoke: round, squircle, bevel, scoop, notch utawa square.
radiusInputNuiRadiusSepira gedhene pojoke: none, small, medium, large utawa full.
densityInputNuiDensitySepira akehe papan sing dienggo: compact, regular utawa roomy.
showMetode() => voidMbukak kalender.

Input kustomisasi sing ora panjenengan setel bakal ngetutake attribute data-nui-* sing paling cedhak. Pirsani pandhuan kustomisasi.

NuiDateRangePicker

Rong kolom tanggal kanthi kalender rentang. Nampa input pamilih tanggal, uga sing iki.

Selector
nui-date-range-picker
JenengJinisGawanKatrangan
valueRong arahNuiDateRange | nullnullRentange, utawa null nganti wiwitan lan pungkasan disetel, kanthi urut.
presetsInputNuiDateRangePreset[][]Rentang kanthi jeneng kanggo dipilih sepisan klik.
monthsInputnumber2Sasi sing dijejerake ing kalender.

NuiDateRangePreset

Rentang kanthi jeneng, tetep utawa digawe nalika dipilih.

JenengJinisGawanKatrangan
labelPropertistringJenenge.
rangePropertiNuiDateRange | (() => NuiDateRange)Rentange, utawa fungsi sing nggawe.