คุณสมบัติ (Props)

PropTypeDefaultคำอธิบาย
valueDate | nullค่าวันที่-เวลาที่เลือก
onChange(dateTime: Date | null) => voidCallback เมื่อค่าเปลี่ยนแปลง
timeTimeConfigการกำหนดค่าแผงเวลา
minDateDateวันที่ต่ำสุดที่สามารถเลือกได้
maxDateDateวันที่สูงสุดที่สามารถเลือกได้
localePartial<Locale>การกำหนดค่า locale แบบกำหนดเอง
initialMonthDateเดือนเริ่มต้นที่แสดง
size"small" | "medium" | "large" | "x-large""medium"ขนาดของคอมโพเนนต์
weekStartsOnWeekDay"sunday"วันแรกของสัปดาห์
isDateUnavailable(date: Date) => booleanทำเครื่องหมายวันที่เป็นปิดใช้งาน
displayFormatstringรูปแบบการแสดงผลแบบกำหนดเอง
openbooleanสถานะการเปิดแบบควบคุม
initialOpenbooleanสถานะการเปิดเริ่มต้น (ไม่ควบคุม)
onOpenChange(open: boolean) => voidCallback เมื่อสถานะการเปิดเปลี่ยนแปลง
requiredbooleanfalseปิดการใช้งานการล้างค่า
showOutsideDaysbooleanfalseแสดงวันจากเดือนที่อยู่ติดกัน
highlightDatesDate[]วันที่ที่ต้องการเน้น
shouldCloseOnSelectbooleanfalseยืนยันอัตโนมัติเมื่อคลิกค่าที่ตั้งไว้ล่วงหน้า
numberOfMonthsnumber1จำนวนเดือนที่จะแสดง
captionLayout"buttons" | "dropdown""buttons"สไตล์การนำทางของคำอธิบาย
fromYearnumberปีเริ่มต้นสำหรับดรอปดาวน์
toYearnumberปีสิ้นสุดสำหรับดรอปดาวน์
disablePastbooleanfalseปิดการใช้งานวันที่ก่อนวันนี้
disableFuturebooleanfalseปิดการใช้งานวันที่หลังวันนี้
inlinebooleanfalseแสดงปฏิทินแบบอินไลน์ (ไม่มีป๊อปอัป)
namestringชื่อ input ที่ซ่อนไว้สำหรับการส่งฟอร์ม
placeholderstringข้อความ Placeholder ของตัวกระตุ้น
hideHeaderbooleanfalseซ่อนส่วนหัวการนำทาง
hideFooterbooleanfalseซ่อนส่วนท้ายการดำเนินการ

TimeConfig

interface TimeConfig {
/** ความแม่นยำในการแสดงเวลา ค่าเริ่มต้นคือ "minute" */
precision?: "hour" | "minute" | "second";
/** รูปแบบ 12 ชั่วโมงหรือ 24 ชั่วโมง ค่าเริ่มต้นคือ "24" */
hourFormat?: "12" | "24";
/** ขั้นการเพิ่มนาที ค่าเริ่มต้นคือ 5 */
minuteStep?: 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30;
/** ขั้นการเพิ่มวินาที ค่าเริ่มต้นคือ 1 */
secondStep?: 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30;
/** ความสูง (เป็น px) ของแต่ละรายการในวงล้อเลื่อน ค่าเริ่มต้นคือ 32 */
itemHeight?: number;
}