Component used to pick date value .

The <DatePicker> component is a user interface element that allows users to select a date from a calendar.

The typical practice is to provide a date picker and when you click on date picker button it pops up a calendar below the date picker, allowing the user to populate the field with an appropriate date.



To import the component you just have to use this code below.

import { DatePicker } from '@marigold/components';


Sorry! There are currently no variants and sizes available.


labelReactNodenoneThe label text.
descriptionReactNodenoneA helpful text.
errorMessageReactNodenoneAn error message.
errorbooleanfalseIf `true`, the field is considered invalid and if set the errorMessage is shown instead of the `description`.
defaultValueDateValuenoneThe default value of the date picker.
valueDateValuenoneThe value of the date picker.
disabledbooleanfalseIf `true`, the date picker is disabled.
requiredbooleanfalseIf `true`, the date picker is required.
readOnlybooleanfalseIf `true`, the date picker is readOnly.
onChangefunctionnoneA callback function that is called with the date picker's current value changes
openbooleanfalseWhether the calendar is open by default (controlled).
minValueDateValuenoneThe minimum allowed date that a user may select.
maxValueDateValuenoneThe maximum allowed date that a user may select.
widthstringfullSets the width of the field. You can see allowed tokens here:


Simple DatePicker

This example shows a regular <DatePicker> without any special props.

Birth Picker
Determine min and max value for date picker

Disabled DatePicker

You can disable the <DatePicker> so that the user can't interact with it anymo re.

Birth Date
disabled date picker

Required DatePicker

If you want a <DatePicker> to be required, you just have to add the property required. With that the small required icon appears next to the label.

Birth Date

DatePicker With an Error

This example shows how to use the error with the errorMessage.

Birth Date
Something went wrong!

DatePicker With Minimum and maximum values

The minValue and maxValue props can also be used to perform builtin validation. This prevents the user from selecting dates outside the valid range in the calendar .

Date Picker
Determine min and max value for date picker