Time picker

Playground

'use client';
import { useState } from 'react';
import {
  Button,
  TimePicker,
  TimePickerTrigger,
  TimePickerContent,
  TimePanel,
  type TimeValue,
} from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "disabled": false
  };
  const [value, setValue] = useState<TimeValue | null>({ hour: 9, minute: 30 });
  return (
    <TimePicker>
      <TimePickerTrigger>
        <Button
          variant="outline"
          tone="secondary"
          disabled={settings.disabled}
          style={{ width: 96 }}
        >
          {value
            ? `${String(value.hour).padStart(2, '0')}:${String(value.minute).padStart(2, '0')}`
            : "시간 선택"}
        </Button>
      </TimePickerTrigger>
      <TimePickerContent aria-label={"시간 선택"}>
        <TimePanel
          value={value}
          onValueChange={setValue}
          labels={{
            period: "오전·오후",
            hour: "시",
            minute: "분",
            am: "오전",
            pm: "오후",
          }}
        />
      </TimePickerContent>
    </TimePicker>
  );
}

Properties

Trigger disabled

Usage

TimePicker 안에 TimePickerTrigger와 이름이 있는 TimePickerContent를 배치하고 TimePanel로 시간을 선택합니다. TimeValue는 24시간 기준의 hour(0–23), minute(0–59)입니다. null은 미선택 상태입니다. 기본 상태에서는 모든 시간을 선택할 수 있습니다. 필요한 경우에만 minTime과 maxTime으로 같은 날의 선택 범위를 제한합니다. labels의 다섯 문구를 모두 설정하면 한국어·영어로 사용할 수 있습니다. 날짜와 시간대는 앱에서 관리합니다.

'use client';
import { useState } from 'react';
import { TimePanel, type TimeValue } from '@mbsw/ui';

export default function Example() {
  const [value, setValue] = useState<TimeValue | null>(null);
  return (
    <TimePanel
      role="group"
      aria-label={"시간 선택"}
      value={value}
      onValueChange={setValue}
      labels={{
        period: "오전·오후",
        hour: "시",
        minute: "분",
        am: "오전",
        pm: "오후",
      }}
    />
  );
}

Playground의 Code 탭에서 현재 설정과 동작이 포함된 예제 전체를 복사할 수 있습니다. 공통 CSS 설치는 설치하기를 확인하세요.

Composition

TimePickerTimePickerTriggerTimePickerAnchorTimePickerContentTimePanel