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.
horizontalConstraint	union Possible 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	Function See signature.	✅		Called with an event holding the new value.
onBlur	FocusEventHandler			Called when input is blurred
onFocus	FocusEventHandler			Called when input is focused Signature: (event) => void
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
hasError	boolean			Indicates if the input has invalid values
isReadOnly	boolean			Indicates that the field is displaying read-only content

Signatures

Signature onChange

(event: TEvent) => void

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