DatePicker

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.

Import


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

Appearance

Sorry! There are currently no variants and sizes available.

Props

Property	Type	Default	Description
`label`	`ReactNode`	`none`	The label text.
`description`	`ReactNode`	`none`	A helpful text.
`errorMessage`	`ReactNode`	`none`	An error message.
`error`	`boolean`	`false`	If `true`, the field is considered invalid and if set the errorMessage is shown instead of the `description`.
`defaultValue`	`DateValue`	`none`	The default value of the date picker.
`value`	`DateValue`	`none`	The value of the date picker.
`disabled`	`boolean`	`false`	If `true`, the date picker is disabled.
`required`	`boolean`	`false`	If `true`, the date picker is required.
`readOnly`	`boolean`	`false`	If `true`, the date picker is readOnly.
`onChange`	`function`	`none`	A callback function that is called with the date picker's current value changes
`open`	`boolean`	`false`	Whether the calendar is open by default (controlled).
`minValue`	`DateValue`	`none`	The minimum allowed date that a user may select.
`maxValue`	`DateValue`	`none`	The maximum allowed date that a user may select.
`width`	`string`	`full`	Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
`isDateUnavailable`	`(date: DateValue) => boolean`	`none`	Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
`granularity`	`"day" \| "hour" \| "minute" \| "second"`	`"day"`	Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.

Examples

Simple (uncontrolled)

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

Preview

Code

Date

Disabled

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

Preview

Code

Birth Date

disabled date picker

Required

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.

Preview

Code

Birth Date

With an Error

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

Preview

Code

Birth Date

Something went wrong!

DatePicker with min/max 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 .

Preview

Code

Date Picker

Determine min and max value for date picker

Controlled

The value and onChange props can be used to control the DatePicker.

Preview

Code

Date

1912

Using a Date Object

When using a datepicker, relying on the standard JavaScript Date object for its value can result in timezone inconsistencies and incorrect date display. That's why the datepicker uses a specific DateValue type from @internationalized/date instead. This library handles correct international date manipulation across calendars, time zones, and other localization concerns.

@internationalized/date

@internationalized/date is a peer dependency. If it's not already in your project, you'll need to install it.

The simplest way to parse a Date for the datepicker is by using parseAbsoluteToLocal. This function converts an absolute date and time into the current user's local time zone. If you're already using a date library like date-fns, you can also utilizing parseDate. Ensure that you only pass the date part to parseDate, excluding the time and timezone information.

Preview

Code

Date

2024