@commercetools-uikit/date-range-input

DateRangeInput

Description

The DateRangeInput component allows the user to select a date range.

Installation

yarn add @commercetools-uikit/date-range-input

npm --save install @commercetools-uikit/date-range-input

Additionally install the peer dependencies (if not present)

yarn add moment react react-intl

npm --save install moment react react-intl

Usage

import DateRangeInput from '@commercetools-uikit/date-range-input';

const Example = () => (
  <DateRangeInput
    placeholder="Select a date..."
    value={['2017-01-11', '2017-01-14']}
    onChange={() => {}}
  />
);

export default Example;

Properties

Props	Type	Required	Default	Description
horizontalConstraint	union Possible values: , 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'			Horizontal size limit of the input field.
value	Array: MomentInput[]	✅		The selected date range, must either be an empty array or an array of two strings holding dates formatted as "YYYY-MM-DD".
aria-invalid	boolean			Indicate if the value entered in the input is invalid.
aria-errormessage	string			HTML ID of an element containing an error message related to the input.
onChange	Function See signature.			Called when the date range changes. Called with an event containing either an empty array (no value) or an array holding two string in this format: "YYYY-MM-DD".
isClearable	boolean		true	Allows the range to be cleared
onFocus	Function See signature.			Called when the date input gains focus.
onBlur	Function See signature.			Called when the date input loses focus.
id	string			Used as the HTML id attribute.
name	string			Used as the HTML name attribute.
placeholder	string			Placeholder value to show in the input field
isCondensed	boolean			Use this property to reduce the paddings of the component for a ui compact variant
isDisabled	boolean			Disables the date picker
isReadOnly	boolean			Disables the date picker menu and makes input field read-only
hasError	boolean			Indicates the input field has an error
hasWarning	boolean			Indicates the input field has warning

Signatures

Signature onChange

(event: TCustomEvent) => void

Signature onFocus

(event: TCustomEvent) => void

Signature onBlur

(event: TCustomEvent) => void

data-* props

The component further forwards all data- attributes to the underlying input component.

Static methods

DateRangeInput.isEmpty

Returns true when the value is considered empty, which is when the value is an empty array.

TextInput.isEmpty([]); // -> true
TextInput.isEmpty(['2018-09-20', '2018-09-24']); // -> false