## 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%" /> ; ``` ## 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 ( ) } ``` ## 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(option.id)} selectedId={selectedOption} />
    Monday Tuesday Wednesday Thursday Friday Saturday Sunday
    }> 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 ( ); }; ```