Non-Printable Material

    @commercetools-uikit/date-input
    TypeScript icon, indicating that this package has built-in type declarations

    15.2.3 • Public • Published

    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 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 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".
    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.
    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.
    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: 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

    Install

    npm i @commercetools-uikit/date-input

    DownloadsWeekly Downloads

    3,465

    Version

    15.2.3

    License

    MIT

    Unpacked Size

    58.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • emmenko
    • commercetools-admin
    • tdeekens