Time Grid

import { TimeGridDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.TimeGrid);

Usage

Use the TimeGrid component to capture a time value from the user with a predefined set of time slots:

Controlled

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

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

data prop

The data prop accepts an array of time values in 24-hour format. Values must be unique. To generate a time range, use the getTimeRange function exported from the @mantine/dates package:

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

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

function WithRange() {
  // In this example we generate time range from 10:00 to 14:00 with 1 hour step:
  // ['10:00', '11:00', '12:00', '13:00', '14:00']
  return <TimeGrid data={getTimeRange({ from: '10:00', to: '14:00', step: '01:00' })} />
}

Min and max time

Set the minTime and maxTime props to limit the available time range. Both props accept time values in 24-hour format:

Disable specific controls

You can disable specific time values by providing an array of disabled values to the disableTime prop:

Allow deselect

Set the allowDeselect prop to allow deselecting the time value by clicking on the control with the selected value:

Change AM/PM labels

Disabled

Set the disabled prop to disable all controls: