# DatePicker

This component is used to select a date.

## Installation

```tsx
import { DatePicker } from 'uxp/components';
```

## Signature

```tsx
const DatePicker: React.FunctionComponent<IDatePickerProps>
```

## Examples

```tsx
<DatePicker
   title="Date"
   date={date}
   onChange={(date) => setDate(date)}
/>
```

```tsx
<DatePicker
    title="Date"
    date={date}
    onChange={(date) => setDate(date)}
    options={{
        disableWeekEnds: true
    }}
/>
```

## Properties

| Name              | Type                                                                                              | Mandatory | Default Value | Example Value |
| ----------------- | ------------------------------------------------------------------------------------------------- | --------- | ------------- | ------------- |
| title             | string                                                                                            | Yes       | -             | -             |
| date              | string \| Date                                                                                    | Yes       | -             | -             |
| onChange          | (date: Date) => void                                                                              | Yes       | -             | -             |
| closeOnSelect     | boolean                                                                                           | No        | -             | -             |
| options           | [IDatePickerOptions](https://help.iviva.com/uxp/v5/additional-resources/types/idatepickeroptions) | No        | -             | -             |
| disableInput      | boolean                                                                                           | No        | -             | -             |
| hideLabels        | boolean                                                                                           | No        | -             | -             |
| hideInput         | boolean                                                                                           | No        | -             | -             |
| showFullMonthName | boolean                                                                                           | No        | -             | -             |
| spacingMode       | [SpacingMode](https://help.iviva.com/uxp/v5/additional-resources/types/spacingmode)               | No        | -             | -             |

## Related Types

* [IDatePickerProps](https://help.iviva.com/uxp/v5/additional-resources/types/idatepickerprops)
* [IDatePickerOptions](https://help.iviva.com/uxp/v5/additional-resources/types/idatepickeroptions)
* [ISpecialDate](https://help.iviva.com/uxp/v5/additional-resources/types/ispecialdate)
* [SpacingMode](https://help.iviva.com/uxp/v5/additional-resources/types/spacingmode)