How to display Mantine TimeInput in 24-hour format (hide AM/PM)?

[jolly oxide]

I'm using Mantine's TimeInput component which defaults to 12-hour format with AM/PM. How can I change it to display time in 24-hour format instead?

Current implementation:

<TimeInput
  size="md"
  label="Start time"
  leftSection={<PiClock size={24} className="text-secondary" />}
  value={startTime}
  maxTime={endTime}
  onChange={handleStartTimeChange}
  className="w-full"
  styles={{
    input: {
      fontFamily: 'inherit',
    },
  }}
  classNames={{ section: styles.section }}
  data-testid="start-time-input"
/>

I want to remove the AM/PM indicator and show times like "14:30" instead of "2:30 PM". Is there a prop or configuration for this?

[odd scaffold]

can you console.log('startTime', startTime);?

From the docs, it doesn't show AM/PM

[jolly oxide]

                  <TimeInput
                    size="md"
                    label="Start time"
                    leftSection={<PiClock size={24} className="text-secondary" />}
                    value="17:02"
                    maxTime="18:00"
                    onChange={handleStartTimeChange}
                    className="w-full"
                    styles={{
                      input: {
                        fontFamily: 'inherit',
                      },
                    }}
                    classNames={{ section: styles.section }}
                    data-testid="start-time-input"
                  />

When I set value as 17:02, it sets like above @odd scaffold

[manic turret]

This option is not available in v7, only available in 8.0 – https://alpha.mantine.dev/dates/time-picker/
You are welcome to install the alpha version and try it

[jolly oxide]

So, should I update the mantine date to v8 to use it?

    "@mantine/core": "^7.16.1",
    "@mantine/dates": "^7.16.1",
    "@mantine/hooks": "^7.16.1",
    "@mantine/notifications": "^7.16.1",

All these dependencies require upgrading?

[manic turret]

yes