설정 옵션
DatePicker를 사용할 때 설정할 수 있는 옵션들입니다.
className
| Type | string |
|---|
DatePicker의 클래스 이름을 설정합니다.
dateFormat
| Type | string | Default | YYYY-MM-DD |
|---|
날짜 형식을 설정합니다.
사용하고 싶은 문자가 있다면 대괄호로 감싸서 표현할 수 있습니다.
(e.g. YYYY [escaped text] MM will output 2024 escaped text 01)
YY- 두자리 수 연도YY1- 현재 10년 중 첫 해의 두 자리 수 연도YY2- 현재 10년 중 마지막 해의 두 자리 수 연도YYYY- 연도YYYY1- 현재 10년 중 첫 해의 연도YYYY2- 현재 10년 중 마지막 해의 연도M- 달MM- 두자리 수 달MMM- 해달 월의 짧은 명칭MMMM- 해달 월 명칭D- 일DD- 두자리 수 일d- 요일 인덱스dd- 최소 요일명ddd- 짧은 요일명dddd- 요일명
locale
| Type | Locale |
|---|
DatePicker의 언어를 설정합니다. 기본값은 영어입니다.
interface Locale {
name: string;
months: string[];
monthsShort: string[];
weekStart?: number;
weekdays: string[];
weekdaysShort: string[];
weekdaysMin: string[];
formats: { time: string; date: string };
placeholder?: string;
}
inline
| Type | boolean | Default | false |
|---|
DatePicker를 항상 표시합니다.
selectedDate
| Type | Date |
|---|
선택 날짜를 설정합니다.
minDate
| Type | Date |
|---|
DatePicker의 최소 날짜를 설정합니다. 0100-01-01보다 작을 수 없습니다.
maxDate
| Type | Date |
|---|
DatePicker의 최대 날짜를 설정합니다. 9999-12-31보다 클 수 없습니다.
view
| Type | Date | Default | days |
|---|
DatePicker의 초기 뷰를 설정합니다. (e.g. days | months | years)
minView
| Type | Date | Default | days |
|---|
DatePicker의 최소 뷰를 설정합니다. 뷰와 동일한 값입니다.
showOtherMonths
| Type | boolean | Default | true |
|---|
true로 설정하면 다른 달의 날짜가 days 뷰에 표시됩니다.
selectOtherMonths
| Type | boolean | Default | true |
|---|
true로 설정하면 다른 달의 날짜를 선택할 수 있습니다.
moveOtherMonths
| Type | boolean | Default | true |
|---|
true로 설정하면 다른 달의 날짜를 선택하면 해당 달로 이동합니다.
shortcuts
| Type | boolean | Default | true |
|---|
키보드 탐색을 활성화합니다.
Move cell focus.
| Command | Description |
|---|---|
| ↑ ↓ ← → | Move cell focus. |
| Ctrl + → or ↓ | Move to the next month |
| Ctrl + ← or ↑ | Move to the previous month |
| Shift + → or ↓ | Move to the next month |
| Shift + ← or ↑ | Move to the previous month |
| Alt + → or ↓ | Move to the next month |
| Alt + ← or ↑ | Move to the previous month |
navigationLoop
| Type | boolean | Default | true |
|---|
최대/최소 날짜를 초과할 때 탐색을 활성화할지 여부를 설정합니다.
autoClose
| Type | boolean | Default | true |
|---|
true로 설정하면 날짜를 선택한 후 달력이 숨겨집니다.
toggleSelected
| Type | boolean | Default | true |
|---|
true로 설정하면 선택된 셀을 클릭하면 선택이 제거됩니다.
titleFormat
| Type | TitleFormat | Default | { days: 'MMMM, <i>YYYY</i>', months: 'YYYY', years: 'YYYY1 - YYYY2' } |
|---|
달력 탐색에 사용되는 제목 템플릿을 설정합니다.
interface TitleFormat {
days: string;
months: string;
years: string;
}
position
| Type | string | Default | bottom-start |
|---|
입력 필드를 기준으로 달력의 위치를 설정합니다.
top|top-start|top-endbottom|bottom-start|bottom-endright|right-start|right-endleft|left-start|left-end
animation
| Type | boolean | Default | true |
|---|
true로 설정하면 달력이 애니메이션으로 열리고 닫힙니다.
backdrop
| Type | boolean | Default | false |
|---|
true로 설정하면 달력이 배경과 함께 표시됩니다.
readOnly
| Type | boolean | Default | false |
|---|
true로 설정하면 input에서 날짜를 편집할 수 없습니다.
placeHolder
| Type | string |
|---|
DatePicker의 input에 표시되는 플레이스홀더를 설정합니다.
theme
| Type | light | dark | Default | light |
|---|
DatePicker의 테마를 설정합니다.
size
| Type | small | normal | Default | normal |
|---|
DatePicker의 크기를 설정합니다.
buttons
| Type | ButtonPresetType | ButtonPresetType[] | ButtonOptions | ButtonOptions[] |
|---|
달력에 버튼을 추가할 수 있습니다. 미리 정의된 버튼 또는 사용자 정의 버튼을 추가할 수 있습니다.
ButtonPresetType
clear: "Clear" 버튼을 추가합니다. 선택된 날짜를 제거합니다.today: "Today" 버튼을 추가합니다. 오늘 날짜를 선택합니다.
ButtonOptions
interface ButtonPresetOptions {
id?: string; // button id
className?: string; // button class
dataset?: Record<string, string>; // button data attributes
attrs?: Record<string, string>; // button attributes
innerHTML?: string; // button inner html
onClick?: (event: MouseEvent, datepicker: SnowDatePicker) => any; // button click event
}
```import { escape } from 'core-js/fn/regexp';