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.
Usage
Import
To import the component you just have to use this code below.
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 |
Examples
Simple DatePicker
This example shows a regular <DatePicker> without any special props.
Disabled DatePicker
You can disable the <DatePicker> so that the user can't interact with it anymo re.
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.
DatePicker With an Error
This example shows how to use the error with the errorMessage.
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 .