DateTimePicker

날짜와 시간을 함께 선택하는 CALS 컨트롤입니다. Foundation의 DatePicker (showTime=true)를 기반으로 하며, DatePicker와 동일한 스타일 오버라이드와 FormItem 래핑을 지원합니다.

개요

DateTimePicker는 원본 Vue vQSDateTimePicker 컴포넌트에 대응합니다. DatePicker가 날짜만 선택하는 데 반해, DateTimePicker는 캘린더 팝업 하단에 시간(시/분/초) 선택 영역이 함께 표시됩니다.

주요 특징

날짜 + 시간 동시 선택 (팝업 내 시간 선택 영역)
제어/비제어 컴포넌트 패턴 지원
FormItem 래핑 (label, required, orientation, error)
오늘 기준 날짜 비활성화 (inactiveMode)
커스텀 날짜 비활성화 (disabledDate)
빠른 선택 단축 버튼 (shortcuts)
스타일 오버라이드 (토큰 CSS 변수)
접근성 (aria-invalid, disabled)

사용 예시

기본 사용


import { DateTimePicker } from "@vortex/ui-cals"
 
<DateTimePicker placeholder="날짜/시간을 선택하세요" />

제어 컴포넌트


const [value, setValue] = useState<Date | undefined>()
 
<DateTimePicker
  value={value}
  onChange={setValue}
  placeholder="날짜/시간 선택"
/>

레이블 + 필수


<DateTimePicker label="예약 일시" required />

수평 레이아웃


<DateTimePicker label="시작 일시" orientation="horizontal" />

비활성 상태


<DateTimePicker disabled placeholder="비활성" />

과거 날짜 비활성화


<DateTimePicker inactiveMode="lt" placeholder="오늘 이후만 선택" />

빠른 선택


<DateTimePicker
  shortcuts={[{ label: "현재 시각", value: new Date() }]}
/>

오류 상태


<DateTimePicker label="예약 일시" required error="필수 항목입니다" />

스타일 오버라이드


<DateTimePicker
  backgroundColor="#f0fdf4"
  borderColor="#16a34a"
  color="#15803d"
/>

API 레퍼런스

Props

Prop	Type	Default	Description
`value`	`Date`	-	선택된 날짜+시간 값
`defaultValue`	`Date`	-	초기 기본값
`onChange`	`(value: Date \| undefined) => void`	-	값 변경 콜백
`placeholder`	`string`	-	안내 텍스트
`showPlaceholder`	`boolean`	`true`	placeholder 표시 여부
`size`	`"xs"\|"sm"\|"md"\|"lg"\|"xl"`	`"md"`	크기
`visible`	`boolean`	`true`	표시 여부
`disabled`	`boolean`	`false`	비활성화
`readOnly`	`boolean`	`false`	읽기 전용
`clearable`	`boolean`	`true`	클리어 버튼 표시
`width`	`string \| number`	`"100%"`	너비
`disabledDate`	`(date: Date) => boolean`	-	날짜 비활성화 함수
`inactiveMode`	`"lt"\|"lte"\|"gt"\|"gte"\|"none"`	`"none"`	오늘 기준 비활성화
`isSearch`	`boolean`	`false`	검색 폼 모드
`onSearch`	`() => void`	-	Enter 시 검색 콜백
`shortcuts`	`DateTimePickerShortcut[]`	-	빠른 선택 단축 목록
`label`	`ReactNode`	-	FormItem 레이블
`showLabel`	`boolean`	`false`	빈 레이블 공간 표시
`labelTooltip`	`string`	-	레이블 도움말
`orientation`	`"horizontal"\|"vertical"`	-	레이블 위치
`required`	`boolean`	`false`	필수 입력 표시
`error`	`ReactNode`	-	오류 메시지
`backgroundColor`	`string`	-	배경색
`color`	`string`	-	텍스트 색상
`borderColor`	`string`	-	테두리 색상
`borderWidth`	`string`	-	테두리 두께
`fontSize`	`string`	-	폰트 크기
`fontWeight`	`string \| number`	-	폰트 굵기
`fontFamily`	`string`	-	폰트 패밀리
`fontStyle`	`string`	-	폰트 스타일
`textAlign`	`string`	-	텍스트 정렬
`className`	`string`	-	컨테이너 className
`formClassName`	`string`	-	FormItem 래퍼 className
`title`	`string`	-	HTML title 속성

Ref

Property/Method	Type	Description
`focus()`	`() => void`	입력에 포커스
`blur()`	`() => void`	포커스 해제
`element`	`HTMLElement \| null`	컨테이너 DOM 요소

DateTimePickerShortcut

Property	Type	Description
`label`	`string`	표시 텍스트
`value`	`Date`	클릭 시 적용할 값

접근성

aria-invalid — error prop 존재 시 자동 설정
disabled — disabled/readOnly 시 비활성 속성 적용
키보드 — Enter 키로 검색 모드 트리거 지원