npm package: @paprika/date-picker
Description: DatePicker component allows user to view and specify a date through an entry field or a calendar widget.
Author: @paprika
Latest version: 5.0.4

<!-- start: Autogenerated - do not modify -->

# @paprika/date-picker

## Description

DatePicker component allows user to view and specify a date through an entry field or a calendar widget.

## Installation

```
yarn add @paprika/date-picker
```

or with npm:

```
npm install @paprika/date-picker
```

## Props

### DatePicker

| Prop        | Type       | required | default      | Description                                                                                                  |
| ----------- | ---------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------ |
| children    | node       | false    | null         |                                                                                                              |
| dateFormat  | string     | false    | "MM/DD/YYYY" | Date format used while entering and parsing user input.                                                      |
| date        | instanceOf | false    | null         | Selected date in moment object.                                                                              |
| humanFormat | string     | false    | undefined    | Date format used while displaying date. It should be human-friendly and spelled out, default is MMMM DD,YYYY |
| isDisabled  | bool       | false    | false        | Should be disabled or not, default is false.                                                                 |
| isReadOnly  | bool       | false    | false        | Should be read-only or not, default is false.                                                                |
| onChange    | func       | true     | -            | Callback when date is selected or input.                                                                     |
| onError     | func       | false    | () => {}     | Internal errors callback                                                                                     |
| hasError    | bool       | false    | false        | If there is an external error or not.                                                                        |

### DatePicker.Input

| Prop        | Type                                                                       | required | default                 | Description                                |
| ----------- | -------------------------------------------------------------------------- | -------- | ----------------------- | ------------------------------------------ |
| a11yText    | string                                                                     | false    | null                    | a11yText on the input.                     |
| clearIcon   | node                                                                       | false    | null                    | Custom clear icon                          |
| placeholder | string                                                                     | false    | ""                      | Placeholder of input.                      |
| size        | [ Input.types.size.SMALL, Input.types.size.MEDIUM, Input.types.size.LARGE] | false    | Input.types.size.MEDIUM | Size of input.                             |
| hasError    | bool                                                                       | false    | false                   | If the value of `<input>` is valid or not. |

### DatePicker.Popover

| Prop                  | Type                                                                                                        | required | default                    | Description                                                                                                                                                  |
| --------------------- | ----------------------------------------------------------------------------------------------------------- | -------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| align                 | [ Popover.types.align.TOP, Popover.types.align.RIGHT, Popover.types.align.BOTTOM, Popover.types.align.LEFT] | false    | Popover.types.align.BOTTOM | Where the popover content is positioned relative to the trigger or getPositioningElement.                                                                    |
| children              | node                                                                                                        | true     | -                          | Content of the popover                                                                                                                                       |
| isDark                | bool                                                                                                        | false    | false                      | Displays as a "tooltip" style with white text on black background.                                                                                           |
| isEager               | bool                                                                                                        | false    | false                      | Activated by mouseOver / focus instead of onClick.                                                                                                           |
| isOpen                | bool                                                                                                        | false    | null                       | How "controlled" popovers are shown / hidden.                                                                                                                |
| isPortal              | bool                                                                                                        | false    | true                       | This renders the popover inline in the DOM and not in a react portal. WARNING: will have side effects with paprika side panels and modals, use with caution. |
| defaultIsOpen         | bool                                                                                                        | false    | null                       | How "uncontrolled" popovers can be rendered open by default.                                                                                                 |
| edge                  | [ Popover.types.align.LEFT, Popover.types.align.RIGHT, null]                                                | false    | null                       | Where the edge of the popover content is based on the trigger or getPositioningElement                                                                       |
| maxWidth              | [string,number]                                                                                             | false    | 320                        | Maximum width of popover content. Using a number is recommended and implies px units.                                                                        |
| minWidth              | [string,number]                                                                                             | false    | 0                          | Minimumn width of popover content. Using a number is recommended and implies px units.                                                                       |
| onClose               | func                                                                                                        | false    | null                       | Callback to fire when user closes popover.                                                                                                                   |
| offset                | number                                                                                                      | false    | toInt(tokens.space)        | Distance, in px, between popover content edge and trigger / getPositioningElement.                                                                           |
| getPositioningElement | func                                                                                                        | false    | null                       | Function that provides DOM element to use as target for positioning the popover.                                                                             |
| getScrollContainer    | func                                                                                                        | false    | null                       | Function that provides the scrolling DOM element that contains the popover.                                                                                  |
| shouldKeepFocus       | bool                                                                                                        | false    | false                      | If focus will stay at the trigger when showing popover. Popover can still be closed when clicking outside or pressing escape key.                            |
| zIndex                | number                                                                                                      | false    | zValue(1)                  | Number setting the z-index for the popover content / tip.                                                                                                    |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## Usage

Please use `<L10n />` component to wrap `<DatePicker />` or you application.

### DatePicker

For a basic date picker

```js
import DatePicker from "@paprika/date-picker";

<DatePicker onChange={changeHandler} />;
```

Customized input

```js
import DatePicker from "@paprika/date-picker";

<DatePicker onChange={changeHandler}>
  <DatePicker.Input placeholder="Date..." />
</DatePicker>;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/forms-datepicker--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/DatePicker/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/date-picker%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/DatePicker/CHANGELOG.md)