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')}`
            : "Choose time"}
        </Button>
      </TimePickerTrigger>
      <TimePickerContent aria-label={"Choose time"}>
        <TimePanel
          value={value}
          onValueChange={setValue}
          labels={{
            period: "Period",
            hour: "Hour",
            minute: "Minute",
            am: "AM",
            pm: "PM",
          }}
        />
      </TimePickerContent>
    </TimePicker>
  );
}

Properties

Trigger disabled

Usage

Place TimePickerTrigger and a named TimePickerContent inside TimePicker, then use TimePanel to select a time. TimeValue uses a 24-hour hour (0–23) and minute (0–59). Use null for no selection. By default, you can select any time. Set minTime and maxTime only when your app needs to restrict selection within one day. Set all five labels for Korean or English. Your app owns dates and time zones.

'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={"Choose time"}
      value={value}
      onValueChange={setValue}
      labels={{
        period: "Period",
        hour: "Hour",
        minute: "Minute",
        am: "AM",
        pm: "PM",
      }}
    />
  );
}

The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.

Composition

TimePickerTimePickerTriggerTimePickerAnchorTimePickerContentTimePanel