Date and Time inputs

overview

setup

Mantine offers the date and time components in a separate package. We must import a separate stylesheet:

npm install @mantine/dates dayjs

import "@mantine/dates/styles.css"

date as strings

Mantine's date and time components natively work with date strings formatted as follows:

• 2026-04-24 (ISO compliant)
• 16:14:00 pr 16:14 (ISO compliant)
• 2026-04-24 16:14:00 (sometimes called SQL format)

While full dates are represented with SQL format strings, the components are compatible with ISO date strings: we can store an ISO date string in state, initialize the component with it and update the component with it:

• 2026-04-24T13:10:22.592Z

In the following examples, we work with dates stored in state as ISO strings rather than SQL strings

luxon

In the following examples, we sometimes use Luxon's DateTime helper to create and/or format dates.

DateTimePicker

DateTimePicker aims to collect a full date and time string, using both a calender style picker and a time input.

It supports valueFormat to customize the displayed date. It does not dictate how the dates are stored.

We provide the underlying date in value and onChange. While it natively works with SQL format strings, we can also provide the date as an ISO string:

// 1.0 init
const [createdAtISO, setCreatedAtISO] = useState(new Date().toISOString())
// '2026-04-24T13:10:22.592Z'

// 2.0 in use
<DateTimePicker
    // what is shown in the input
    // e.g. April 24 — 16:14
    valueFormat="MMMM DD [—] HH:mm"
    // controlled value, compatible with ISO
    value={completedAtIso}
    // on change, the control provides a SQL formatted date
    // e.g. 2026-04-24 16:14:00
    onChange={(dateTimeSql) => {
        if (!dateTimeSql) return
        setCompletedAtIso(new Date(dateTimeSql).toISOString())
    }}
    // input label
    label="Completed at"
/>

TimeInput

TimeInput works with HH:mm, HH:mm:ss and compatible variants. Note that those formats are ISO compliant:

const initTime = DateTime.local().toFormat("HH:mm")
const [timeIso, setTimeIso] = useState(initTime)

The event is of type React.ChangeEvent:

// "HH:mm"
<TimeInput
    label="Time"
    value={timeIso}
    onChange={(event) => {
        setTimeIso(event.target.value)
    }}
/>

DatePickerInput

DatePickerInput is only concerned about the date part of the full date, aka the the yyyy-MM-dd part:

const initDate = DateTime.local().toFormat("yyyy-MM-dd")
const [datePart, setDatePart] = useState(initDate)

Note: onChange receive the candidate date part as a string:

// "yyyy-MM-dd"
<DatePickerInput
    label="Date"
    value={datePart}
    onChange={(datePart) => {
        // 2026-04-24
        if (datePart) {
            setDatePart(datePart)
        }
    }}
/>