TimeInput

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

function Demo() {
  return <TimeInput label="What time is it now?" />;
}

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

function Demo() {
  const now = new Date();
  const then = dayjs(now).add(30, 'minutes').toDate();
  const [value, setValue] = useState<[Date, Date]>([now, then]);

  return <TimeRangeInput label="Appointment time" value={value} onChange={setValue} clearable />;
}

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

function Demo() {
  return <TimeInput label="What time is it now?" withSeconds defaultValue={new Date()} />;
}

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

function Demo() {
  return <TimeInput label="Pick time" format="12" defaultValue={new Date()} />;
}

import { TimeInput } from '@mantine/dates';
import { IconClock } from '@tabler/icons';

function Demo() {
  return (
    <TimeInput
      label="Pick time"
      placeholder="Pick time"
      icon={<IconClock size={16} />}
      defaultValue={new Date()}
    />
  );
}

// Error as boolean – red border color
<TimeInput error />

// Error as React node – red border color and message below input
<TimeInput error="It is not a valid time" />

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

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