TimePicker

시간을 선택할 수 있는 컴포넌트입니다. 내부 시간 옵션은 키보드로 조작할 수 있습니다.

import { TimePicker } from 'sud-ui';

사용할 때

시간을 선택할 때

사용예제

Basic Usage

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

ReadOnly Usage

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

rounded

square

capsule

Shape

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

import React, { useState } from "react";
import { TimePicker, 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}
      />
      <TimePicker shape={shape} value={value} onChange={setValue} />
    </div>
  );
}

Range Usage

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

12Hours Usage

12시간제 사용 여부를 설정할 수 있습니다.

Disabled Usage

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

sm

md

lg

Size

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

import React, { useState } from "react";
import { TimePicker, 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}
      />
      <TimePicker size={size} value={value} onChange={setValue} />
    </div>
  );
}

Error Usage

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

Formatting

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

Step Usage

분 단위 선택 단계를 설정할 수 있습니다.

사용 방법

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

value

선택된 시간 값

Date | { startTime: Date, endTime: Date }

-

onChange

시간이 변경될 때 호출되는 함수

(value: Date | { startTime: Date, endTime: Date }, text: string) => void

-

colorType

TimePicker의 색상 타입

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

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

string

-

color

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

string

-

border

TimePicker의 테두리 표시 여부

boolean

true

borderColor

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

string

-

borderType

TimePicker의 테두리 스타일

solid

|

dashed

|

dotted

|

double

|

groove

|

ridge

|

inset

|

outset

|

none

solid

borderWeight

TimePicker의 테두리 두께

number

1

underline

TimePicker의 밑줄 표시 여부

boolean

false

shape

TimePicker의 모양

square

|

circle

|

rounded

|

capsule

rounded

shadow

TimePicker의 그림자 크기

none

|

sm

|

md

|

lg

sm

size

TimePicker의 크기

sm

|

md

|

lg

md

disabled

비활성화 여부

boolean

false

readOnly

읽기 전용 여부

boolean

false

error

에러 상태

boolean

false

errorText

에러 메시지

string

-

className

추가 클래스명

string

-

placeholder

플레이스홀더 텍스트

string

"시간 선택"

format

시간 포맷

string

"HH:mm:ss"

range

시간 범위 선택 여부

boolean

false

placement

시간 선택 팝업의 위치

string

"top"

showSecond

초 단위 표시 여부

boolean

false

use12Hours

12시간제 사용 여부

boolean

false

step

분 단위 선택 단계. 1보다 작거나 유효하지 않은 값은 1로 처리됩니다.

number (1-60)

1

popConfirmProps

PopConfirm 컴포넌트에 전달되는 props

object

{}

inputProps

Input 컴포넌트에 전달되는 props

object

{}

timePickerProps

TimeSelector 컴포넌트에 전달되는 props

object

{}

id

HTML id 속성

string

-

ariaLabel

접근성을 위한 레이블

string

-

ariaRequired

필수 입력 여부

boolean

-

ariaInvalid

유효하지 않은 상태 여부

boolean

-

ariaDescribedby

설명을 제공하는 요소의 id

string

-

Soon UI Design

TimePicker

사용할 때

사용예제

사용 방법

개인정보 처리방침

서비스 약관