@commercetools-uikit/date-input
@commercetools-uikit/date-input
npm i @commercetools-uikit/date-input
@commercetools-uikit/date-input

@commercetools-uikit/date-input

Component library πŸ’…

by commercetools

15.6.0 (see all)License:MITTypeScript:Built-In
npm i @commercetools-uikit/date-input
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

PropsTypeRequiredDefaultDescription
horizontalConstraintunion
Possible values:
, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'
Horizontal size limit of the input field.
valuestringβœ…The selected date, must either be an empty string or a date formatted as "YYYY-MM-DD".
onChangeFunction
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".
onFocusFocusEventHandlerCalled when the date input gains focus.
onBlurFunction
See signature.
Called when the date input loses focus.
idstringUsed as the HTML id attribute.
aria-invalidbooleanIndicate if the value entered in the input is invalid.
aria-errormessagestringHTML ID of an element containing an error message related to the input.
namestringUsed as the HTML name attribute.
placeholderstringPlaceholder value to show in the input field
isDisabledbooleanDisables the date picker
isReadOnlybooleanDisables the date picker menu and makes input field read-only
hasErrorbooleanIndicates the input field has an error
hasWarningbooleanIndicates the input field has a warning
minValuestringA minimum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".
maxValuestringA maximum selectable date. Must either be an empty string or a date formatted as "YYYY-MM-DD".

Signatures

Signature onChange

(event: TCustomEvent) => void

Signature onBlur

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

Downloads/wk

5.3K

GitHub Stars

134

LAST COMMIT

9mos ago

MAINTAINERS

3

CONTRIBUTORS

54

OPEN ISSUES

30

OPEN PRs

17
VersionTagPublished
15.6.0
latest
6d ago
0.0.0-canary-20221202123550
canary
6d ago
10.18.5
next
3yrs ago
10.18.0-alpha.0
alpha
3yrs ago
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate