DatePicker
Maeng Design의 DatePicker 컴포넌트는 날짜를 선택할 경우에 사용합니다.
Size
small, medium, large 3가지의 size가 존재합니다.import React from 'react';
import { DatePicker } from 'maeng-design';
const App = () => (
<div>
<DatePicker size="small" />
<DatePicker size="medium" />
<DatePicker size="large" />
</div>
);DateRangePicker
시작일과 종료일을 선택할 수 있습니다.import React from 'react';
import { DatePicker } from 'maeng-design';
const { DateRangePicker } = DatePicker;
const App = () => (
<div>
<DateRangePicker />
</div>
);DatePicker API
DatePicker 속성을 설정하여 DatePicker를 컨트롤 할 수 있습니다.| Property | Description | Type | default |
|---|---|---|---|
| value | 날짜 값 | Date | - |
| placeholder | 날짜 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 안내문구를 표시합니다. | string | YYYY-MM-DD |
| size | 날짜 입력 필드의 크기를 지정할 수 있습니다. | small medium large | medium |
| disabled | 날짜 입력 필드를 비활성화 시킬 수 있습니다. | boolean | false |
| color | DatePicker의 색상을 지정할 수 있습니다. | ColorName | blue6 |
| onChange | 날짜 선택 시 트리거되는 핸들러 설정 | (value) => void | - |
DateRangePicker API
DateRangePicker을 이용하여 날짜 범위를 선택할 수 있습니다.| Property | Description | Type | default |
|---|---|---|---|
| value | 날짜 값 | Date[] | [] |
| min | 최소 날짜 값 | Date | - |
| max | 최대 날짜 값 | Date | - |
| placeholder | 날짜 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 안내문구를 표시합니다. | string | YYYY-MM-DD |
| size | 날짜 입력 필드의 크기를 지정할 수 있습니다. | small medium large | medium |
| disabled | 날짜 입력 필드를 비활성화 시킬 수 있습니다. | boolean | false |
| color | DatePicker의 색상을 지정할 수 있습니다. | ColorName | blue6 |
| onChange | 날짜 선택 시 트리거되는 핸들러 설정 | (value) => void | - |