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

คุณสมบัติ (Prop)	ประเภท (Type)	ค่าเริ่มต้น (Default)	คำอธิบาย (Description)
`value`	`Date \| null`	—	ค่าวันที่-เวลาที่เลือก
`onChange`	`(dateTime: Date \| null) => void`	—	Callback เมื่อค่าเปลี่ยนแปลง
`time`	`TimeConfig`	—	การกำหนดค่าแผงเวลา
`minDate`	`Date`	—	วันที่ต่ำสุดที่เลือกได้
`maxDate`	`Date`	—	วันที่สูงสุดที่เลือกได้
`locale`	`Partial<Locale>`	—	การกำหนดค่า locale แบบกำหนดเอง
`initialMonth`	`Date`	—	เดือนที่แสดงผลเริ่มต้น
`size`	`"small" \| "medium" \| "large" \| "x-large"`	`"medium"`	ขนาดของคอมโพเนนต์
`weekStartsOn`	`WeekDay`	`"sunday"`	วันแรกของสัปดาห์
`isDateUnavailable`	`(date: Date) => boolean`	—	ทำเครื่องหมายวันที่เป็นปิดใช้งาน
`displayFormat`	`string`	—	รูปแบบการแสดงผลที่กำหนดเอง
`open`	`boolean`	—	สถานะการเปิดแบบควบคุม (controlled)
`initialOpen`	`boolean`	—	สถานะการเปิดเริ่มต้น (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	—	Callback เมื่อสถานะการเปิดเปลี่ยนแปลง
`required`	`boolean`	`false`	ปิดการใช้งานการล้างค่า
`showOutsideDays`	`boolean`	`false`	แสดงวันจากเดือนข้างเคียง
`highlightDates`	`Date[]`	—	วันที่ที่ต้องการเน้น
`shouldCloseOnSelect`	`boolean`	`false`	ยืนยันอัตโนมัติเมื่อคลิกค่าที่ตั้งไว้ล่วงหน้า
`numberOfMonths`	`number`	`1`	จำนวนเดือนที่จะแสดง
`captionLayout`	`"buttons" \| "dropdown"`	`"buttons"`	สไตล์การนำทางของส่วนหัว
`fromYear`	`number`	—	ปีเริ่มต้นสำหรับเมนูดรอปดาวน์
`toYear`	`number`	—	ปีสิ้นสุดสำหรับเมนูดรอปดาวน์
`disablePast`	`boolean`	`false`	ปิดการใช้งานวันที่ก่อนวันนี้
`disableFuture`	`boolean`	`false`	ปิดการใช้งานวันที่หลังวันนี้
`inline`	`boolean`	`false`	แสดงปฏิทินแบบอินไลน์ (ไม่มีป๊อปอัป)
`name`	`string`	—	ชื่อ input ที่ซ่อนไว้สำหรับการส่งฟอร์ม
`placeholder`	`string`	—	ข้อความ Placeholder ของตัวทริกเกอร์
`hideHeader`	`boolean`	`false`	ซ่อนส่วนหัวการนำทาง
`hideFooter`	`boolean`	`false`	ซ่อนส่วนท้ายที่มีการกระทำ

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) ของแต่ละรายการใน scroll wheel ค่าเริ่มต้นคือ 32 */
  itemHeight?: number;
}