API ของตัวเลือกวันที่

Import

import-date-picker.ts

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

NuiDateField

วันที่ หรือวันที่และเวลา ที่พิมพ์ทีละส่วน

Selector: nui-date-field

NuiDateField: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`value`สองทาง	`NuiDate \| NuiDateTime \| null`	`null`	ค่า หรือ null จนกว่าจะกรอกครบทุกส่วน
`granularity`Input	`'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	หยุดที่วัน หรือต่อไปจนถึงชั่วโมง นาที หรือวินาที
`min, max`Input	`string \| null`		ค่าที่เร็วที่สุดและช้าที่สุด หากอยู่นอกช่วงนี้ ช่องจะไม่ถูกต้อง
`placeholder`Input	`string \| null`	`now`	จุดเริ่มต้นของส่วนที่ยังว่างเมื่อกดปุ่มลูกศร
`hourCycle`Input	`12 \| 24`		นาฬิกาแบบ 12 หรือ 24 ชั่วโมง ค่าเริ่มต้นเป็นไปตาม locale
`minuteStep`Input	`number`	`1`	ระยะที่ปุ่มลูกศรเลื่อนนาทีในแต่ละครั้ง
`disabled, readonly`Input	`boolean`	`false`	ป้องกันการเปลี่ยนค่า
`locale`Input	`string`	`LOCALE_ID`	กำหนดลำดับ ตัวคั่น ตัวเลข และรูปแบบนาฬิกา
`labels`Input	`Partial<NuiDateFieldLabels>`		ข้อความทุกส่วนที่ช่องประกาศ สำหรับการแปล
`invalid`พร็อพเพอร์ตี	`Signal<boolean>`		ค่าอยู่นอกช่วง `min` และ `max` หรือไม่
`focus`เมธอด	`() => void`		โฟกัสที่ส่วนแรกที่ยังว่าง

NuiTimeField

เวลาที่พิมพ์ทีละส่วน รับ input เดียวกับช่องวันที่

Selector: nui-time-field

NuiTimeField: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`granularity`Input	`'hour' \| 'minute' \| 'second'`	`'minute'`	หยุดที่ชั่วโมง นาที หรือวินาที

NuiDatePicker

ช่องวันที่พร้อมปฏิทินใน Popover รับ input ของช่องวันที่ และ input ต่อไปนี้

Selector: nui-date-picker

NuiDatePicker: พร็อพเพอร์ตี
ชื่อ	ชนิด	คำอธิบาย
`unavailable`Input	`(date: NuiDate) => boolean`	วันที่ปฏิทินไม่ให้เลือก
`firstDay, weekNumbers`Input	`1 … 7, boolean`	ส่งต่อให้ปฏิทิน
`labels`Input	`Partial<NuiDatePickerLabels>`	ข้อความของช่อง ปุ่ม และปฏิทิน
`corners`Input	`NuiCorners`	รูปทรงของมุม: `round` `squircle` `bevel` `scoop` `notch` หรือ `square`
`radius`Input	`NuiRadius`	ขนาดของมุม: `none` `small` `medium` `large` หรือ `full`
`density`Input	`NuiDensity`	พื้นที่ที่ใช้: `compact` `regular` หรือ `roomy`
`show`เมธอด	`() => void`	เปิดปฏิทิน

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

NuiDateRangePicker

ช่องวันที่สองช่องพร้อมปฏิทินแบบช่วง รับ input ของตัวเลือกวันที่ และ input ต่อไปนี้

Selector: nui-date-range-picker

NuiDateRangePicker: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`value`สองทาง	`NuiDateRange \| null`	`null`	ช่วงวันที่ หรือ null จนกว่าจะกำหนดปลายทั้งสองด้านตามลำดับ
`presets`Input	`NuiDateRangePreset[]`	`[]`	ช่วงที่มีชื่อ ซึ่งเลือกได้ในคลิกเดียว
`months`Input	`number`	`2`	จำนวนเดือนที่แสดงเคียงกันในปฏิทิน

NuiDateRangePreset

ช่วงที่มีชื่อ ซึ่งกำหนดไว้ตายตัว หรือสร้างขึ้นตอนที่ถูกเลือก

NuiDateRangePreset: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`label`พร็อพเพอร์ตี	`string`		ชื่อของช่วง
`range`พร็อพเพอร์ตี	`NuiDateRange \| (() => NuiDateRange)`		ช่วงวันที่ หรือฟังก์ชันที่สร้างช่วงนั้น