The DateRangeInput
component allows the user to select a date range.
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
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;
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 |
(event: TCustomEvent) => void
(event: TCustomEvent) => void
(event: TCustomEvent) => void
The component further forwards all data-
attributes to the underlying input
component.
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