@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