@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. |

Usage

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

DatePicker

For a basic date picker

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

<DatePicker onChange={changeHandler} />;

Customized input

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

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

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG