README

DateInput

Description

The `DateInput` component allows the user to select a date. It formats the selected date depending on the users' locale.

Installation

yarn add @commercetools-uikit/date-input

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

Additionally install the peer dependencies (if not present)

yarn add moment react react-intl

npm --save install moment react react-intl

Usage

import DateInput from '@commercetools-uikit/date-input';

const Example = () => (
  <DateInput
    placeholder="Select a date..."
    value="2017-12-31"
    onChange={() => {}}
  />
);

export default Example;

Properties

Props	Type	Required	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`	`string`	✅	The selected date, must either be an empty string or a date formatted as "YYYY-MM-DD".
`onChange`	`Function` See signature.	✅	Called when the date changes. Called with an event containing either an empty string (no value) or a string in this format: "YYYY-MM-DD". Signature: `(event) => void`
`onFocus`	`FocusEventHandler`		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 a warning
`minValue`	`string`		A minimum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".
`maxValue`	`string`		A maximum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".

Signatures

Signature `onChange`

(event: TEvent) => void

Signature `onBlur`

(event: TEvent) => void

Static methods

`DateInput.isEmpty`

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

DateInput.isEmpty(''); // -> true
DateInput.isEmpty('2018-09-20'); // -> false

Usage no npm install needed!