@commercetools-uikit/date-range-input

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

Usage no npm install needed!

<script type="module">
  import commercetoolsUikitDateRangeInput from 'https://cdn.skypack.dev/@commercetools-uikit/date-range-input';
</script>

README

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".
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".
Signature: (event) => void
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
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: TEvent) => void

Signature onFocus

(event: TEvent) => void

Signature onBlur

(event: TEvent) => 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