TimeInput

TimeInput

사용자로부터 시간을 입력받는 컴포넌트예요. 네이티브 input[type="time"] 요소를 기반으로 해요.

출처: 문서

본문

사용법 (Usage)

TimeInput 컴포넌트는 Input과 Input.Wrapper 컴포넌트의 기능과 모든 input 요소 props를 지원해요. TimeInput 문서에는 컴포넌트가 지원하는 모든 기능이 포함되어 있지 않아요. 사용 가능한 모든 기능은 Input 문서에서 확인할 수 있어요.

import { TimeInput } from '@mantine/dates';

function Demo() {
  return <TimeInput label="Input label" description="Input description" />;
}

TimePicker 컴포넌트

TimeInput 컴포넌트는 네이티브 input[type="time"] 요소를 기반으로 하며, 시간 형식 선택이나 커스텀 시간 select 드롭다운 같은 대부분의 고급 기능을 지원하지 않아요. 더 많은 기능이 필요하면 TimePicker 컴포넌트를 대신 사용해요.

TimeInput의 기능/제한:

• 네이티브 input[type="time"] 요소
• 모바일 기기의 시간 선택을 위한 네이티브 브라우저 컨트롤
• 시간 형식은 사용자의 locale에 따라 달라져요
• 시간/분/초가 있는 네이티브 드롭다운만 사용 가능하고, Firefox에서는 동작하지 않아요
• 모바일 Safari는 초(seconds) 선택 옵션을 제공하지 않아요

제어 컴포넌트 (Controlled)

import { useState } from 'react';
import { TimeInput } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState('');
  return (
    <TimeInput
      value={value}
      onChange={(event) => setValue(event.currentTarget.value)}
    />
  );
}

브라우저 피커 표시 (Show browser picker)

입력 요소의 showPicker 메서드를 호출해 브라우저 피커를 표시할 수 있어요. 일부 브라우저(데스크톱 Safari)는 이 기능을 지원하지 않아 메서드가 아무것도 하지 않는다는 점에 주의해요.

import { useRef } from 'react';
import { ActionIcon } from '@mantine/core';
import { TimeInput } from '@mantine/dates';
import { ClockIcon } from '@phosphor-icons/react';

function Demo() {
  const ref = useRef<HTMLInputElement>(null);

  const pickerControl = (
    <ActionIcon variant="subtle" color="gray" onClick={() => ref.current?.showPicker()}>
      <ClockIcon size={16} />
    </ActionIcon>
  );

  return <TimeInput ref={ref} rightSection={pickerControl} />;
}

초 포함 (With seconds)

import { TimeInput } from '@mantine/dates';

function Demo() {
  return <TimeInput withSeconds />;
}

아이콘 포함 (With icon)

import { ClockIcon } from '@phosphor-icons/react';
import { TimeInput } from '@mantine/dates';

function Demo() {
  return <TimeInput leftSection={<ClockIcon size={16} />} />;
}

비활성 상태 (Disabled state)

import { TimeInput } from '@mantine/dates';

function Demo() {
  return <TimeInput disabled />;
}

요소 ref 가져오기 (Get element ref)

import { useRef } from 'react';
import { TimeInput } from '@mantine/dates';

function Demo() {
  const ref = useRef<HTMLInputElement>(null);
  return <TimeInput ref={ref} />;
}

접근성 (Accessibility)

TimeInput을 label prop 없이 사용하면 화면 판독기가 제대로 알려주지 못해요. aria-label을 설정하면 라벨이 보이지 않아도 화면 판독기가 알려줘요. label prop을 설정하면 별도로 aria-label을 지정할 필요 없이 접근성이 확보돼요.

import { TimeInput } from '@mantine/dates';

function Demo() {
  return <TimeInput aria-label="Pick a time" />;
}

더 알아보기 (Learn more)

• YearPickerInput
• TimePicker
• Input