TimeGrid

TimeGrid

미리 정의된 시간 옵션 집합으로 사용자로부터 시간 값을 입력받는 컴포넌트예요.

출처: 문서

본문

사용법 (Usage)

TimeGrid 컴포넌트를 사용해 미리 정의된 시간 슬롯 집합으로 시간 값을 입력받아요.

import { getTimeRange, TimeGrid } from '@mantine/dates';

function Demo() {
  return <TimeGrid data={getTimeRange('10:00', '21:00', '01:00')} format="24h" />;
}

제어 컴포넌트 (Controlled)

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

function Demo() {
  const [value, setValue] = useState('10:00');
  return <TimeGrid data={['10:00', '11:00']} value={value} onChange={setValue} />;
}

data prop

data prop은 24시간 형식의 시간 값 배열을 받아요. 값은 고유해야 해요. 시간 범위를 생성하려면 @mantine/dates 패키지에서 내보내는 getTimeRange 함수를 사용해요.

import { TimeGrid, getTimeRange } from '@mantine/dates';

function WithArray() {
  return <TimeGrid data={['10:00', '11:00', '12:00']} />;
}

function WithRange() {
  // 이 예시에서는 10:00부터 14:00까지 1시간 스텝으로 시간 범위를 생성해요:
  // ['10:00', '11:00', '12:00', '13:00', '14:00']
  return <TimeGrid data={getTimeRange('10:00', '14:00', '01:00')} />;
}

최소·최대 시간 (Min and max time)

minTime과 maxTime props로 사용 가능한 시간 범위를 제한할 수 있어요. 두 props 모두 24시간 형식의 시간 값을 받아요.

import { getTimeRange, TimeGrid } from '@mantine/dates';

function Demo() {
  return <TimeGrid data={getTimeRange('09:00', '22:00', '01:00')} minTime="10:00" maxTime="18:00" />;
}

특정 컨트롤 비활성화 (Disable specific controls)

disableTime prop에 비활성화할 값의 배열을 제공해 특정 시간 값을 비활성화할 수 있어요.

import { getTimeRange, TimeGrid } from '@mantine/dates';

function Demo() {
  return <TimeGrid data={getTimeRange('09:00', '11:45', '00:15')} disableTime={['09:30', '10:30']} />;
}

선택 해제 허용 (Allow deselect)

allowDeselect prop을 설정하면 선택된 값을 가진 컨트롤을 클릭해 시간 값을 선택 해제할 수 있어요.

import { getTimeRange, TimeGrid } from '@mantine/dates';

function Demo() {
  return <TimeGrid data={getTimeRange('09:00', '14:00', '01:00')} allowDeselect />;
}

AM/PM 라벨 변경 (Change AM/PM labels)

import { getTimeRange, TimeGrid } from '@mantine/dates';

function Demo() {
  return <TimeGrid format="12h" data={getTimeRange('09:00', '22:00', '01:00')} amPmLabels={['पूर्वाह्न', 'अपराह्न']} />;
}

비활성 (Disabled)

disabled prop으로 모든 컨트롤을 비활성화할 수 있어요.

import { getTimeRange, TimeGrid } from '@mantine/dates';

function Demo() {
  return <TimeGrid data={getTimeRange('09:00', '22:00', '01:00')} disabled />;
}

더 알아보기 (Learn more)

• TimePicker
• TimeValue