DatePicker

Source@react-form-builder/components-mantine

Introduction

The DatePicker component displays a calendar for selecting a single date. Variants include MtDatePicker (single), MtDateRangePicker, and MtDateMultiplePicker. The component requires @mantine/dates and is based on Mantine DatePicker.

It is included within the following NPM package: @react-form-builder/components-mantine.

Components covered

• MtDatePicker: Single date selection.
• MtDateRangePicker: Start/end date range selection.
• MtDateMultiplePicker: Multiple distinct date selection.

Differences between components

Component	Selection type	Value shape	Typical use case
MtDatePicker	Single date	Date | null	Simple date fields (birthday, due date)
MtDateRangePicker	Date range	[Date, Date] | null	Periods (from–to), bookings, intervals
MtDateMultiplePicker	Multiple dates	Date[]	Highlighted days, recurring selections

MtDatePicker

Single-date variant that lets the user pick exactly one day from the calendar. It is the most common choice for simple date fields and uses the Value property as Date \| null.

MtDateRangePicker

Range variant that lets the user select a start and end date. The Value is a [Date, Date] tuple (or null when not set) and is best suited for booking periods or any from–to scenarios.

MtDateMultiplePicker

Multiple-dates variant that allows choosing any number of distinct dates. The Value is a Date[] array and is useful for highlighting custom sets of days (for example, unavailable dates or special events).

Detailed component pages

• MtDatePicker (single)
• MtDateRangePicker
• MtDateMultiplePicker

Main properties

The following general properties are available within the Main tab:

Name	Type	Description
Value	Date | null	Selected date (uncontrolled value)
Min date	Date	Minimum selectable date
Max date	Date	Maximum selectable date
Size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	Size of the calendar
Disabled	boolean	Disables the picker
On change	event	Fired when the date changes

At the bottom of the Main properties menu, you can find additional options:

• Render When: Provides conditional rendering for your component as described in the corresponding chapter.
• HTML attributes: Allows you to provide custom HTML attributes for your form.

Style properties

These are properties that allow to customize the size, color and other style properties of your component:

• For Device: You can provide component's style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.

• Component > Class Name: Add a class name for your component for the subsequent styling if necessary.

• Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:

  Name	Type	Description
  Width	number	Specifies the width for your component
  Height	number	Specifies the height for your component
  Margin top/right/bottom/left	number	Margin values for you component
  Color	string	Allows customizing the text color
  Background color	string	Enables customizing the background color