DatePicker#
캘린더 UI를 통해 날짜를 선택할 수 있는 컴포넌트입니다.
사용법#
// 기본 날짜 선택
CouiDatePicker(
value: selectedDate,
onChanged: handleDateChange,
)
// 날짜 범위 제한
CouiDatePicker(
value: selectedDate,
onChanged: handleDateChange,
minDate: DateTime(2024, 1, 1),
maxDate: DateTime(2024, 12, 31),
)
// 날짜 범위 선택
CouiDateRangePicker(
startDate: checkIn,
endDate: checkOut,
onChanged: handleDateRangeChange,
)
DatePicker(
value: selectedDate,
onChange: handleDateChange,
)
DateRangePicker(
startDate: checkIn,
endDate: checkOut,
onChange: handleDateRangeChange,
)
Props / Parameters#
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
value | DateTime? | null | 선택된 날짜 |
onChanged |
ValueChanged<DateTime?>? |
null |
날짜 변경 콜백 |
minDate |
DateTime? |
null |
선택 가능한 최소 날짜 |
maxDate |
DateTime? |
null |
선택 가능한 최대 날짜 |
locale | Locale? | 시스템 로케일 | 표시 로케일 |
firstDayOfWeek |
int |
0 (일요일) |
주 시작 요일 |
변형 (Variants)#
인라인 캘린더#
CouiDatePicker.inline(
value: selectedDate,
onChanged: handleDateChange,
)
날짜 + 시간 선택#
CouiDateTimePicker(
value: selectedDateTime,
onChanged: handleDateTimeChange,
)
비활성 날짜 지정#
CouiDatePicker(
value: selectedDate,
onChanged: handleDateChange,
disabledDates: holidays,
selectableDayPredicate: (date) => date.weekday <= 5,
)