Needless UI

Komponen

Kalender

Pilih satu hari, rentang, atau beberapa hari, juga lewat keyboard.

Impor

import-calendar.ts
import { NuiCalendar, type NuiDateRange } from '@needless-ui/angular/calendar';

NuiCalendar

Kalender untuk memilih hari.

Selektor
nui-calendar
NamaTipeDefaultDeskripsi
selectionInput'single' | 'range' | 'multiple''single'Berapa banyak hari yang bisa dipilih.
valueDua arahNuiDate | nullnullHari yang dipilih.
valuesDua arahNuiDate[][]Hari-hari yang dipilih, secara berurutan.
rangeDua arahNuiDateRange | nullnullRentang yang dipilih, termasuk kedua ujungnya.
monthDua arahNuiMonth | nullnullBulan yang ditampilkan; yang pertama jika ada beberapa.
viewDua arah'day' | 'month' | 'year''day'Hari, bulan, atau tahun.
min, maxInputNuiDate | nullHari pertama dan terakhir yang bisa dipilih.
unavailableInput(date: NuiDate) => booleanMengecualikan hari lain, misalnya hari libur.
monthsInputnumber1Jumlah bulan yang ditampilkan berdampingan.
weekNumbersInputbooleanfalseMenampilkan nomor minggu ISO.
firstDayInput1 … 7Hari pertama dalam minggu, 1 untuk Senin. Default-nya mengikuti locale.
localeInputstringLOCALE_IDMemformat nama dan angka, serta menentukan hari pertama dalam minggu.
labelsInputPartial<NuiCalendarLabels>Semua teks yang ditampilkan atau diumumkan kalender, untuk diterjemahkan.
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.
pickedOutputNuiDate | NuiDateRangeMengirimkan setiap pilihan: satu hari, atau rentang setelah lengkap.
focusDateMetode(date?: NuiDate) => voidMemindahkan fokus keyboard ke suatu hari, sambil menampilkan bulannya.

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

NuiDateRange

Rentang hari.

NamaTipeDefaultDeskripsi
start, endPropertiNuiDateHari pertama dan terakhir, keduanya termasuk.