Date & Time Laboratory

A hands-on tour of the full Mantine dates family — single, range, and multi-date pickers, free-text date entry with natural-language parsing, and combined date-time selection — driven by a realistic field-service scheduling scenario. Every value in the demo is deterministic, so what you see is exactly what ships.

Laboratory Controls

Size

DatePickerInput — single

clearable, highlightToday, presets, excludeDate (Sundays + holidays), min/max bounds.

2026-06-16

DatePickerInput — range

type='range' with quick presets, allowSingleDateInRange, and two visible months.

2026-06-15 → 2026-06-21

DatePickerInput — multiple

type='multiple' for non-contiguous days; booked days are excluded.

— nothing selected —

DateInput — free text with custom parser

Type a date or the words 'today', 'tomorrow', 'yesterday' (anchored to the demo's fixed today).

— nothing selected —

DateTimePicker

Combined date + time selection with seconds hidden and bounded to the demo year.

Jun 16, 2026 9:00 AM

Implementation Source Code