@paprika/date-picker NPM

@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

@babel/runtime-corejs2 @paprika/calendar @paprika/constants @paprika/date-input @paprika/helpers @paprika/popover @paprika/stylers @paprika/tokens prop-types

@infinitebrahmanuniverse/nolb-_pap @everything-registry/sub-chunk-704 @paprika/filter

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago