TimeInput

Description

The TimeInput component allows the user to select a time. It formats the selected date depending on the locale.

Installation

yarn add @commercetools-uikit/time-input

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

Additionally install the peer dependencies (if not present)

yarn add react react-intl

npm --save install react react-intl

Usage

import TimeInput from '@commercetools-uikit/time-input';

const Example = () => <TimeInput value="14:00" onChange={() => {}} />;

export default Example;

Properties

| Props | Type | Required | Default | Description | | ---------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | ---------------------------------------------------------------------------------------------- | | id | string | | | Used as HTML id property. An id is auto-generated when it is not specified. | | 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. | | horizontalConstraint | unionPossible values:, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto' | | 'scale' | Horizontal size limit of the input fields. | | name | string | | | Used as HTML name of the input component. | | autoComplete | string | | | Used as HTML autocomplete of the input component. | | value | string | | | Value of the input | | onChange | ChangeEventHandler | | | Called with an event holding the new value. | | onBlur | FocusEventHandler | | | Called when input is blurred | | onFocus | FocusEventHandler | | | Called when input is focused | | isAutofocussed | boolean | | | Focus the input on initial render | | isDisabled | boolean | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | | placeholder | string | | | Placeholder text for the input | | isCondensed | boolean | | | Use this property to reduce the paddings of the component for a ui compact variant | | hasWarning | boolean | | | Indicates the input field has a warning | | hasError | boolean | | | Indicates if the input has invalid values | | isReadOnly | boolean | | | Indicates that the field is displaying read-only content |

value

The value after the field has been blurred is always either valid or an empty string. The input automatically formats the value on blur by calling onChange with the formatted value - or with an empty value in case the input was not a valid time.

Usage in forms

It's likely that you want to use this input to get Time values from the user. Make sure to convert all times to the 24h format using TimeInput.to24h when converting the form values to a document for the API.

Static methods

TimeInput.to24h

Returns true when the value is considered empty, which is when the value is empty or consists of spaces only.

TimeInput.to24h(''); // -> ''
TimeInput.to24h(' '); // -> ''
TimeInput.to24h('three'); // -> ''
TimeInput.to24h('4 pm'); // -> '16:00'
TimeInput.to24h('4:40 AM'); // -> '04:00'
TimeInput.to24h('3pm'); // -> '15:00'
TimeInput.to24h('4:40 AM'); // -> '04:00'

TimeInput.to24h('15:10'); // -> '15:10'
TimeInput.to24h('15:2'); // -> '15:02'
TimeInput.to24h('04'); // -> '04:00'
TimeInput.to24h('3 AM'); // -> '03:00'
TimeInput.to24h('3 PM'); // -> '15:00'
TimeInput.to24h('3:15 AM'); // -> '03:15'
TimeInput.to24h('3:5 AM'); // -> '03:05'
TimeInput.to24h('0:00'); // -> '00:00'
TimeInput.to24h('10:02:03'); // -> '10:02:03'
TimeInput.to24h('10:2:3'); // -> '10:02:03'
TimeInput.to24h('10:2:3.456'); // -> '10:02:03.456'
TimeInput.to24h('10:2:3.5'); // -> '10:02:03.500'
TimeInput.to24h('10:3.5'); // -> ''
TimeInput.to24h('1300:00.000'); // -> ''
TimeInput.to24h('1300'); // -> ''
TimeInput.to24h('300'); // -> ''
TimeInput.to24h('13:00.000'); // -> ''
TimeInput.to24h('15:09.300'); // -> ''
TimeInput.to24h('10:3.5'); // -> ''

TimeInput.toLocaleTime

Converts any value to either a formatted value suitable for the locale, or an empty string. The resulting format might use 12h or 24h depending on the locale. If milliseconds are included, the 24h format is returned.

Signature: (time: String, locale: String) => String

TimeInput.toLocaleTime('10:00', 'en'); // -> '10:00 AM'
TimeInput.toLocaleTime('10:00', 'de'); // -> '10:00'
TimeInput.toLocaleTime('13:00', 'en'); // -> '1:00 PM'
TimeInput.toLocaleTime('13:00', 'de'); // -> '13:00'
TimeInput.toLocaleTime('1:00:00.111 PM', 'en'); // -> '13:00:00.111'
TimeInput.toLocaleTime('13:00:00.111', 'en'); // -> '13:00:00.111'
TimeInput.toLocaleTime('banter', 'en'); // -> ''

Main Functions and use cases are:

• Input field for time