Needless UI

Komponen

Pemilih tanggal

Ketik tanggal atau waktu per segmen, atau pilih di kalender.

Impor

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

NuiDateField

Tanggal, atau tanggal dan waktu, yang diketik per segmen.

Selektor
nui-date-field
NamaTipeDefaultDeskripsi
valueDua arahNuiDate | NuiDateTime | nullnullNilainya, atau null sampai setiap segmen terisi.
granularityInput'day' | 'hour' | 'minute' | 'second''day'Berhenti di hari, atau berlanjut sampai jam, menit, atau detik.
min, maxInputstring | nullNilai paling awal dan paling akhir. Di luar rentang itu, kolom tidak valid.
placeholderInputstring | nullnowTitik awal segmen kosong saat diubah dengan tombol panah.
hourCycleInput12 | 24Format 12 atau 24 jam. Default-nya mengikuti locale.
minuteStepInputnumber1Seberapa jauh tombol panah menggeser menit.
disabled, readonlyInputbooleanfalseMencegah perubahan.
localeInputstringLOCALE_IDMenentukan urutan, pemisah, angka, dan format jam.
labelsInputPartial<NuiDateFieldLabels>Semua teks yang disampaikan kolom, untuk diterjemahkan.
invalidPropertiSignal<boolean>Apakah nilainya berada di luar min dan max.
focusMetode() => voidMemfokuskan segmen kosong pertama.

NuiTimeField

Waktu dalam sehari yang diketik per segmen. Menerima input yang sama dengan kolom tanggal.

Selektor
nui-time-field
NamaTipeDefaultDeskripsi
granularityInput'hour' | 'minute' | 'second''minute'Berhenti di jam, menit, atau detik.

NuiDatePicker

Kolom tanggal dengan kalender di popover. Menerima input kolom tanggal, ditambah input berikut.

Selektor
nui-date-picker
NamaTipeDefaultDeskripsi
unavailableInput(date: NuiDate) => booleanHari yang tidak bisa dipilih di kalender.
firstDay, weekNumbersInput1 … 7, booleanDiteruskan ke kalender.
labelsInputPartial<NuiDatePickerLabels>Teks untuk kolom, tombol, dan kalender.
cornersInputNuiCornersBentuk sudut: round, squircle, bevel, scoop, notch, atau square.
radiusInputNuiRadiusSeberapa bulat sudutnya: none, small, medium, large, atau full.
densityInputNuiDensitySeberapa banyak ruang yang digunakan komponen: compact, regular, atau roomy.
showMetode() => voidMembuka kalender.

Input kustomisasi yang tidak Anda atur akan mengikuti atribut data-nui-* terdekat. Lihat panduan kustomisasi.

NuiDateRangePicker

Dua kolom tanggal dengan kalender rentang. Menerima input pemilih tanggal, ditambah input berikut.

Selektor
nui-date-range-picker
NamaTipeDefaultDeskripsi
valueDua arahNuiDateRange | nullnullRentangnya, atau null sampai kedua ujung diisi secara berurutan.
presetsInputNuiDateRangePreset[][]Rentang bernama yang bisa dipilih dengan sekali klik.
monthsInputnumber2Jumlah bulan yang ditampilkan berdampingan di kalender.

NuiDateRangePreset

Rentang bernama, tetap atau dibuat saat dipilih.

NamaTipeDefaultDeskripsi
labelPropertistringNamanya.
rangePropertiNuiDateRange | (() => NuiDateRange)Rentangnya, atau fungsi yang membuatnya.