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 | unionPossible 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 | FunctionSee 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 | FunctionSee signature. | | | Called when the date input gains focus. | | onBlur | FunctionSee 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