밀당 DS

시작하기

TimeRangePicker

Data Input

시작·종료 시간을 휠 패널로 고르는 시간 범위 선택기.

Usage

시작·종료 시간과 종일 여부를 하나의 시간 범위로 선택하게 할 때 사용한다.

import

import

import { TimeRangePicker } from '@mildang/design-system/TimeRangeField';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

TimeRangePicker Props

Prop

Type

Default

side
필수

"end" | "start"

지정 안 함

cancelText

string

지정 안 함

className

string

지정 안 함

confirmText

string

지정 안 함

fullTimeLabel

string

지정 안 함

fullTimeValue

string

지정 안 함

isFullTime

boolean

false

minuteStep

1 | 5 | 10 | 15 | 30

5

onCancel

() => void

지정 안 함

onConfirm

(value: string) => void

지정 안 함

onFullTimeChange

(next: boolean) => void

지정 안 함

showFooter

boolean

true

value

string

지정 안 함

같은 패밀리

@mildang/design-system/TimeRangeField 에서 같이 내보내는 컴포넌트다.

TimeRangeFieldBase

시작·종료 시간 입력과 선택 패널을 묶은 시간 범위 필드.

예제

기본 사용

범위용 휠 패널입니다. side 로 시작·종료를 정하고 onFullTimeChange 를 넘기면 종일 체크박스가 붙습니다.

코드

Open in Playground
'use client';

import { useState } from 'react';
import { TimeRangePicker } from '@mildang/design-system/TimeRangeField';

/**
 * 범위 시나리오용 휠 패널. `side` 가 이 패널이 시작·종료 중 어느 쪽인지 정하고,
 * `onFullTimeChange` 를 넘길 때만 footer 좌측에 종일(full-time) 체크박스가 나온다 —
 * 이 체크박스가 `TimePicker` 와 구분되는 지점이다.
 *
 * 값 확정은 `onConfirm` 이다. draft 는 패널이 내부에서 관리하므로 `onChange` 가 없다.
 */
export default function TimeRangePickerExample() {
  const [value, setValue] = useState('09:00');
  const [isFullTime, setIsFullTime] = useState(false);

  return (
    <TimeRangePicker
      side="start"
      value={value}
      minuteStep={30}
      isFullTime={isFullTime}
      onFullTimeChange={setIsFullTime}
      onConfirm={setValue}
    />
  );
}

side="start"

코드

Open in Playground
import { useState } from 'react';
import { Stack } from '@mildang/styled-system/jsx';
import { TimeRangePicker } from '@mildang/design-system/TimeRangeField';
import { Text } from '@mildang/design-system/Text';

const TimeRangePickerStartSideExample = function Render() {
    const [value, setValue] = useState<string | undefined>('09:00');
    const [isFullTime, setIsFullTime] = useState(false);
    return (
      <Stack gap="8">
        <TimeRangePicker
          side="start"
          value={value}
          isFullTime={isFullTime}
          onFullTimeChange={setIsFullTime}
          onCancel={() => {}}
          onConfirm={(v) => setValue(v)}
        />
        <Text variant="caption-lg-medium" color="neutral.text.lowest">
          value: {value ?? '(none)'} · Full-time: {String(isFullTime)}
        </Text>
      </Stack>
    );
  };

export default TimeRangePickerStartSideExample;

side="end"

코드

Open in Playground
import { useState } from 'react';
import { Stack } from '@mildang/styled-system/jsx';
import { TimeRangePicker } from '@mildang/design-system/TimeRangeField';
import { Text } from '@mildang/design-system/Text';

const TimeRangePickerEndSideExample = function Render() {
    const [value, setValue] = useState<string | undefined>('18:00');
    const [isFullTime, setIsFullTime] = useState(false);
    return (
      <Stack gap="8">
        <TimeRangePicker
          side="end"
          value={value}
          isFullTime={isFullTime}
          onFullTimeChange={setIsFullTime}
          onCancel={() => {}}
          onConfirm={(v) => setValue(v)}
        />
        <Text variant="caption-lg-medium" color="neutral.text.lowest">
          value: {value ?? '(none)'} · Full-time: {String(isFullTime)}
        </Text>
      </Stack>
    );
  };

export default TimeRangePickerEndSideExample;

Full-time 잠금 상태

코드

Open in Playground
import { HStack, Stack } from '@mildang/styled-system/jsx';
import { Text } from '@mildang/design-system/Text';
import { TimeRangePicker } from '@mildang/design-system/TimeRangeField';

const TimeRangePickerFullTimeLockedExample = () => (
    <HStack gap="16" alignItems="flex-start">
      <Stack gap="4">
        <Text variant="caption-lg-medium" color="neutral.text.lowest">
          start (00:00 · AM 12:00)
        </Text>
        <TimeRangePicker
          side="start"
          value="00:00"
          isFullTime
          onFullTimeChange={() => {}}
          onCancel={() => {}}
          onConfirm={() => {}}
        />
      </Stack>
      <Stack gap="4">
        <Text variant="caption-lg-medium" color="neutral.text.lowest">
          end (23:59 · PM 11:59)
        </Text>
        <TimeRangePicker
          side="end"
          value="23:59"
          isFullTime
          onFullTimeChange={() => {}}
          onCancel={() => {}}
          onConfirm={() => {}}
        />
      </Stack>
    </HStack>
  );

export default TimeRangePickerFullTimeLockedExample;

Full-time 체크박스 없음

코드

Open in Playground
import { useState } from 'react';
import { Stack } from '@mildang/styled-system/jsx';
import { TimeRangePicker } from '@mildang/design-system/TimeRangeField';
import { Text } from '@mildang/design-system/Text';

const TimeRangePickerWithoutFullTimeExample = function Render() {
    const [value, setValue] = useState<string | undefined>('09:00');
    return (
      <Stack gap="8">
        <TimeRangePicker
          side="start"
          value={value}
          onCancel={() => {}}
          onConfirm={(v) => setValue(v)}
        />
        <Text variant="caption-lg-medium" color="neutral.text.lowest">
          value: {value ?? '(none)'}
        </Text>
      </Stack>
    );
  };

export default TimeRangePickerWithoutFullTimeExample;