## Feature Examples
### Size
- description: Adjust the size using the `size` prop. It supports 3 sizes: - Use `large` when the date input needs emphasis. - For most common cases, use the default `medium`. - In more dense and compact layouts, use `small`.
- example:
```jsx
{}}
/>
{}}
/>
{}}
/>
;
```
### Status
- description: Control the status using the `status` prop. There are 3 states: - `error` highlights invalid dates. - `warning` highlights dates that can't be validated or might impact the user negatively. - `loading` shows that the server is loading the selected value.
- example:
```jsx
{}}
/>
{}}
/>
{}}
/>
;
```
### Status message
- description: Add text that explains the status or what action the user should take with the `statusMessage` prop. Showing the status message inline, directly below the date picker is preferred in all default cases. - To add an accessible inline message, wrap the component in a `` and add the `statusMessage`. - To add a status message in a tooltip that requires users to hover on the icon, use the `statusMessage` prop. View more inline status message examples in ``.
- example:
```jsx
For all default cases: {}}
/>
For narrow layouts only: {}}
/>
;
```
### Read-only and disabled
- description: Control the input interaction with these props: - Use `readOnly` to display dates that cannot be overwritten (but can still be copied). - Disable all input interactions with the `disabled` prop. Use it to highlight an unavailable selection.
- example:
```jsx
{}}
/>
{}}
/>
;
```
### Clear button
- description: Use the `clearButton` prop to add a button that clears the selected date easily.
- example:
```jsx
() => {
const [value, setValue] = React.useState(new Date());
return (
setValue(null)}
onChange={setValue}
width="240px"
/>
);
};
```
### Locale and date style
- description: Set appropriate formatting per country with `locale` and `dateStyle` props. `dateStyle` supports 2 values: - In most cases, the default style should be `short.` - Give the month more emphasis with the `medium` prop. - Show day and month in more detail with the `long` prop.
- example:
```jsx
{}}
/>
{}}
/>
{}}
/>
;
```
### First day of the week
- description: Use `firstDayOfWeek` to adjust which day of the week is shown first in the calendar view. Overwrite the default value for Sunday (0) with a number representing any other day of the week (Monday = 1, Tuesday = 2, etc.).
- example:
```jsx
{}}
/>
{}}
/>
;
```
### Year and month selections
- description: Make it easier for users to select dates far in the past or future with the `showMonthDropdown` and `showYearDropdown`. These dropdowns will show inside the calendar view.
- example:
```jsx
{}}
/>;
```
### Excluding dates
- description: Control the date ranges that users can select with the following props: - Stop users from selecting dates in the past with `excludePastDates`. - Don't allow users to select a specific set or range of dates with `filterDate` .
- example:
```jsx
{}}
/>
date < new Date()}
width="50%"
onChange={() => {}}
/>
;
```
## Developer Examples
### Built-in date validation
- description: The component's built-in validation feature covers these cases: - `formatError` - when a user types in a date that is invalid and impossible to parse. - `outOfBoundsError` - when a user types in a date that is out of the accepted range. This validation is triggered when the `excludePastDates` or `filterDate` props are enabled. Get informed about a validation event by using the `onValidate` callback function. It provides these parameters: `validationType`, input `value` and `format`.
- example:
```jsx
() => {
const [date, setDate] = React.useState(new Date());
const [error, setError] = React.useState('');
const handleValidation = ({ validationType, value, format }) => {
if (validationType === 'formatError') {
setError(`Dates must be in this format: ${format}`);
} else if (validationType === 'outOfBoundsError') {
setError('Enter a date that is in the future');
} else if (validationType === 'valid') {
setError('');
}
};
return (
);
};
```
### Custom date validations
- description: To apply custom validations to the component, use `onChange`, `value` and `status` together with the `statusMessage` prop.
- example:
```jsx
() => {
const [date, setDate] = React.useState(new Date());
const [error, setError] = React.useState('');
const handleValidation = ({ value }) => {
if (new Date(value) <= new Date()) {
setError('Enter a date that is in the future');
} else {
setError('');
}
};
return (
);
};
```
### Masked DatePicker using use-mask-input
- description: _Requires use of external package. In this example `use-mask-input` package is used._
- example:
```jsx
() => {
const { withMask } = require('use-mask-input');
const maskRef = React.useMemo(
() =>
withMask('99/99/9999', {
placeholder: '_',
showMaskOnHover: false,
}),
[],
);
return {}} />;
};
```
## Common Use Case Examples
### Settings panel
- description: Use the date picker to control the design of calendar components on the user's site.
- example:
```jsx
() => {
const [selectedOption, setSelectedOption] = React.useState(0);
const options = [
{ id: 0, value: 'Monday' },
{ id: 1, value: 'Sunday' },
];
return (
{}}
>
setSelectedOption(Number(option.id))}
selectedId={selectedOption}
/>
}>
Add Available Dates
}>
Add Unavailable Dates
);
};
```
### Together with time input
- description: Use the date picker together with `` for scheduling appointments, events and more.
- example:
```jsx
() => {
const [startDate, setStartDate] = React.useState(new Date());
const [endDate, setEndDate] = React.useState(new Date());
return (
);
};
```
## Accessibility Examples
### Helper text
- description: To help users enter the correct date format, use helper text below the date picker which describes the expected date format. This will help prevent user errors.
- example:
```jsx
{}}
/>
;
```