TimeValue
TimeValue
서식화된 시간 값을 표시하는 컴포넌트예요.
출처: 문서
본문
사용법 (Usage)
TimeValue 컴포넌트를 사용해 다양한 형식으로 시간을 표시할 수 있어요.
import { Text } from '@mantine/core';
import { TimeValue } from '@mantine/dates';
function Demo() {
return (
<>
<Text comp="span">24h format: <TimeValue value="18:45" format="24h" /></Text>
<Text comp="span">12h format: <TimeValue value="18:45" format="12h" /></Text>
</>
);
}
초 포함 (With seconds)
withSeconds prop을 사용해 초를 표시할 수 있어요.
import { Text } from '@mantine/core';
import { TimeValue } from '@mantine/dates';
function Demo() {
return (
<>
<Text comp="span">12h format: <TimeValue value="18:45:34" format="12h" withSeconds /></Text>
<Text comp="span">24h format: <TimeValue value="18:45:34" format="24h" withSeconds /></Text>
</>
);
}
AM/PM 라벨
amPmLabels prop을 사용해 AM/PM 라벨을 표시할 수 있어요.
import { Text } from '@mantine/core';
import { TimeValue } from '@mantine/dates';
function Demo() {
return (
<Text comp="span">
Custom AM/PM labels: <TimeValue value="18:45" format="12h" amPmLabels={['पूर्वाह्न', 'अपराह्न']} />
</Text>
);
}
Date 객체 (Date object)
value로 문자열 대신 Date 객체를 사용할 수 있어요.
import { Text } from '@mantine/core';
import { TimeValue } from '@mantine/dates';
function Demo() {
return (
<>
<Text comp="span">24h format: <TimeValue value={new Date('2025-01-01T18:45:00')} format="24h" /></Text>
<Text comp="span">12h format: <TimeValue value={'2025-01-01T18:45:00'} format="12h" /></Text>
</>
);
}