Date and Time inputs

setup

npm install @mantine/dates dayjs

import "@mantine/dates/styles.css"

DateTimePicker

collect an ISO date&time with DateTimePicker

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

<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 and DatePickerInput

TimeInput

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

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

DatePickerInput

const startDatePartIso = DateTime.local().toFormat("yyyy-MM-dd")
const [datePartIso, setDatePartIso] = useState(startDatePartIso)

// "yyyy-MM-dd"
<DatePickerInput
    label="Date"
    value={datePartIso}
    onChange={(datePartIso) => {
        if (datePartIso) {
            setDatePartIso(datePartIso)
        }
    }}
/>