DatePicker

날짜를 선택할 수 있는 컴포넌트입니다.

import { DatePicker } from 'sud-ui';

사용할 때

날짜를 선택할 때

사용예제

Basic Usage

기본적인 사용 방법입니다.

ReadOnly Usage

읽기 전용 상태의 버튼 컴포넌트입니다.

sm

md

lg

Size

DatePicker 의 크기를 설정할 수 있습니다.

import React, { useState } from "react";
import { DatePicker, Radio } from "sud-ui";

export default function Example() {
  const [value, setValue] = useState(new Date());
  const [size, setSize] = useState("md");

  const sizeOptions = [
    { label: "sm", value: "sm" },
    { label: "md", value: "md" },
    { label: "lg", value: "lg" }
  ];

  return (
    <div>
      <Radio.Group
        options={sizeOptions}
        direction="horizontal"
        value={size}
        onChange={setSize}
      />
      <DatePicker size={size} value={value} onChange={setValue} />
    </div>
  );
}

Error Usage

DatePicker 의 에러 상태를 설정할 수 있습니다.

Formatting

DatePicker 의 포맷을 설정할 수 있습니다.

Disabled Usage

비활성화 상태의 버튼 컴포넌트입니다.

Locale Usage

언어 설정을 할 수 있습니다.

rounded

square

capsule

Shape

DatePicker 의 모양을 설정할 수 있습니다.

import React, { useState } from "react";
import { DatePicker, Radio } from "sud-ui";

export default function Example() {
  const [value, setValue] = useState(new Date());
  const [shape, setShape] = useState("rounded");

  const shapeOptions = [
    { label: "rounded", value: "rounded" },
    { label: "square", value: "square" },
    { label: "capsule", value: "capsule" }
  ];

  return (
    <div>
      <Radio.Group
        options={shapeOptions}
        direction="horizontal"
        value={shape}
        onChange={setShape}
      />
      <DatePicker shape={shape} value={value} onChange={setValue} />
    </div>
  );
}

Range Usage

DatePicker 의 범위 선택 상태를 설정할 수 있습니다.

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

value

선택된 날짜 값

Date | DatePickerValue

-

onChange

날짜가 변경될 때 호출되는 함수 (value: Date | DatePickerValue, text: string) => void

(value: Date | DatePickerValue, text: string) => void

() => {}

colorType

DatePicker의 색상 타입

default

|

primary

|

success

|

warning

|

danger

|

info

|

red

|

rose

|

coral

|

orange

|

volcano

|

apricot

|

yellow

|

gold

|

amber

|

green

|

lime

|

mint

|

blue

|

sky

|

cerulean

|

indigo

|

cobalt

|

navy

|

purple

|

plum

|

orchid

|

forest

|

sage

|

warm-gray

|

cool-gray

|

neutral

|

text

|

ghost

default

background

DatePicker의 배경색(palette값 또는 HEX code)

string

-

color

DatePicker의 텍스트 색상(palette값 또는 HEX code)

string

-

border

DatePicker의 테두리 표시 여부

boolean

-

borderColor

DatePicker의 테두리 색상(palette값 또는 HEX code)

string

-

borderType

DatePicker의 테두리 스타일

solid

|

dashed

|

dotted

|

double

|

groove

|

ridge

|

inset

|

outset

|

none

-

borderWeight

DatePicker의 테두리 두께

number

-

underline

DatePicker의 밑줄 표시 여부

boolean

-

shape

DatePicker의 모양

square

|

circle

|

rounded

|

capsule

rounded

shadow

DatePicker의 그림자 크기

none

|

sm

|

md

|

lg

sm

size

DatePicker의 크기

sm

|

md

|

lg

md

disabled

비활성화 여부

boolean

false

readOnly

읽기 전용 여부

boolean

false

error

에러 상태

boolean

-

errorText

에러 메시지

string

-

className

추가 클래스명

string

""

placeholder

플레이스홀더 텍스트

string

날짜 선택

format

날짜 포맷

string

YYYY-MM-DD

range

날짜 범위 선택 여부

boolean

false

placement

캘린더 팝업의 위치

top

|

bottom

|

left

|

right

top

locale

언어 설정

en

|

ko

en

popConfirmProps

PopConfirm 컴포넌트에 전달되는 props

object

{}

inputProps

Input 컴포넌트에 전달되는 props

object

{}

calendarProps

Calendar 컴포넌트에 전달되는 props

object

{}

style

추가 스타일

CSSProperties

{}

id

HTML id 속성

string

-

ariaLabel

접근성을 위한 레이블

string

-

ariaRequired

필수 입력 여부

boolean

-

ariaInvalid

유효하지 않은 상태 여부

boolean

-

ariaDescribedby

설명을 제공하는 요소의 id

string

-

Soon UI Design

DatePicker

사용할 때

사용예제

사용 방법

개인정보 처리방침

서비스 약관