Import

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

NuiCalendar

ปฏิทินสำหรับเลือกวัน

Selector
nui-calendar
NuiCalendar: พร็อพเพอร์ตี
ชื่อชนิดค่าเริ่มต้นคำอธิบาย
selectionInput'single' | 'range' | 'multiple''single'จำนวนวันที่เลือกได้
valueสองทางNuiDate | nullnullวันที่เลือก
valuesสองทางNuiDate[][]วันที่เลือกทั้งหมด เรียงตามลำดับ
rangeสองทางNuiDateRange | nullnullช่วงที่เลือก รวมวันที่ปลายทั้งสองด้าน
monthสองทางNuiMonth | nullnullเดือนที่แสดงอยู่ หากแสดงหลายเดือนจะเป็นเดือนแรก
viewสองทาง'day' | 'month' | 'year''day'มุมมองแบบวัน เดือน หรือปี
min, maxInputNuiDate | nullวันแรกและวันสุดท้ายที่เลือกได้
unavailableInput(date: NuiDate) => booleanกันวันอื่นที่เลือกไม่ได้ออก เช่น วันหยุด
monthsInputnumber1จำนวนเดือนที่แสดงเคียงกัน
weekNumbersInputbooleanfalseแสดงหมายเลขสัปดาห์แบบ ISO
firstDayInput1 … 7วันแรกของสัปดาห์ โดย 1 คือวันจันทร์ ค่าเริ่มต้นเป็นไปตาม locale
localeInputstringLOCALE_IDใช้จัดรูปแบบชื่อและตัวเลข และกำหนดวันแรกของสัปดาห์
labelsInputPartial<NuiCalendarLabels>ข้อความทุกส่วนที่ปฏิทินแสดงหรือประกาศ สำหรับการแปล
cornersInputNuiCornersรูปทรงของมุม: round squircle bevel scoop notch หรือ square
radiusInputNuiRadiusขนาดของมุม: none small medium large หรือ full
densityInputNuiDensityพื้นที่ที่ใช้: compact regular หรือ roomy
pickedOutputNuiDate | NuiDateRangeส่งค่าออกมาทุกครั้งที่เลือก เป็นวันที่ หรือเป็นช่วงเมื่อเลือกครบแล้ว
focusDateเมธอด(date?: NuiDate) => voidย้ายโฟกัสของคีย์บอร์ดไปยังวันที่ระบุ และแสดงเดือนของวันนั้น

Input สำหรับการปรับแต่งที่ไม่ได้กำหนดค่าไว้ จะใช้ค่าตาม attribute data-nui-* ที่อยู่ใกล้ที่สุด ดูคู่มือการปรับแต่ง

NuiDateRange

ช่วงวันที่

NuiDateRange: พร็อพเพอร์ตี
ชื่อชนิดค่าเริ่มต้นคำอธิบาย
start, endพร็อพเพอร์ตีNuiDateวันแรกและวันสุดท้าย โดยรวมทั้งสองวัน