19.2.0 • Published 3 days ago

@commercetools-uikit/time-input v19.2.0

Weekly downloads
3,625
License
MIT
Repository
github
Last release
3 days ago

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

PropsTypeRequiredDefaultDescription
idstringUsed as HTML id property. An id is auto-generated when it is not specified.
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.
horizontalConstraintunionPossible 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.
namestringUsed as HTML name of the input component.
autoCompletestringUsed as HTML autocomplete of the input component.
valuestringValue of the input
onChangeChangeEventHandlerCalled with an event holding the new value.
onBlurFocusEventHandlerCalled when input is blurred
onFocusFocusEventHandlerCalled when input is focused
isAutofocussedbooleanFocus the input on initial render
isDisabledbooleanIndicates that the input cannot be modified (e.g not authorized, or changes currently saving).
placeholderstringPlaceholder text for the input
hasWarningbooleanIndicates the input field has a warning
hasErrorbooleanIndicates if the input has invalid values
isReadOnlybooleanIndicates 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
19.2.0

7 days ago

19.1.0

19 days ago

19.0.0

1 month ago

18.5.0

2 months ago

18.4.0

2 months ago

18.3.0

2 months ago

18.2.0

2 months ago

18.1.0

3 months ago

18.0.0

3 months ago

17.1.0

3 months ago

17.0.1

3 months ago

17.0.0

4 months ago

16.12.1

5 months ago

16.12.0

5 months ago

16.5.0

10 months ago

16.6.1

9 months ago

16.6.0

9 months ago

16.4.1

10 months ago

16.9.0

6 months ago

16.7.3

8 months ago

16.7.2

8 months ago

16.7.1

8 months ago

16.7.0

9 months ago

16.7.5

8 months ago

16.7.4

8 months ago

16.8.0

6 months ago

16.11.0

6 months ago

16.10.0

6 months ago

16.4.0

10 months ago

16.3.0

11 months ago

16.2.1

11 months ago

16.2.0

11 months ago

16.1.1

12 months ago

16.1.0

12 months ago

15.15.0

1 year ago

15.15.1

1 year ago

16.0.0

1 year ago

15.13.2

1 year ago

15.14.3

1 year ago

15.14.1

1 year ago

15.14.2

1 year ago

15.14.0

1 year ago

15.13.1

1 year ago

15.13.0

1 year ago

15.12.0

1 year ago

15.9.0

1 year ago

15.10.0

1 year ago

15.11.2

1 year ago

15.11.0

1 year ago

15.11.1

1 year ago

15.7.0

1 year ago

15.8.0

1 year ago

15.5.0

1 year ago

15.5.1

1 year ago

15.6.0

1 year ago

15.4.0

1 year ago

15.3.0

2 years ago

15.2.4

2 years ago

15.2.1

2 years ago

15.2.2

2 years ago

15.2.3

2 years ago

15.1.1

2 years ago

15.1.2

2 years ago

15.1.0

2 years ago

15.2.0

2 years ago

15.0.0

2 years ago

14.0.2

2 years ago

14.0.3

2 years ago

14.0.4

2 years ago

14.0.5

2 years ago

14.0.6

2 years ago

13.0.4

2 years ago

14.0.0

2 years ago

14.0.1

2 years ago

13.0.2

2 years ago

13.0.0

2 years ago

13.0.1

2 years ago

12.2.9

2 years ago

12.2.5

2 years ago

12.2.6

2 years ago

12.2.7

2 years ago

12.2.4

3 years ago

12.2.3

3 years ago

12.2.2

3 years ago

12.2.1

3 years ago

12.2.0

3 years ago

12.1.0

3 years ago

12.0.12

3 years ago

12.0.8

3 years ago

12.0.7

3 years ago

12.0.3

3 years ago

12.0.4

3 years ago

12.0.6

3 years ago

12.0.2

3 years ago

12.0.0

3 years ago

11.3.0

3 years ago

11.2.1

3 years ago

11.2.0

3 years ago

11.0.2

3 years ago

11.0.1

3 years ago

10.47.4

3 years ago

10.47.3

3 years ago

10.47.0

3 years ago

10.46.3

3 years ago

10.46.2

3 years ago

10.46.1

3 years ago

10.45.0

3 years ago

10.44.4

3 years ago

10.44.1

3 years ago

10.44.0

3 years ago

10.43.3

3 years ago

10.43.2

3 years ago

10.42.3

3 years ago

10.42.2

3 years ago

10.42.0

3 years ago

10.42.1

3 years ago

10.41.0

3 years ago

10.40.0

3 years ago

10.40.1

3 years ago

10.39.8

3 years ago

10.39.7

3 years ago

10.39.6

3 years ago

10.39.4

4 years ago

10.39.3

4 years ago

10.39.2

4 years ago

10.39.1

4 years ago

10.38.0

4 years ago

10.35.2

4 years ago

10.34.0

4 years ago

10.33.0

4 years ago

10.32.0

4 years ago

10.30.1

4 years ago

10.27.1

4 years ago

10.27.0

4 years ago

10.24.0

4 years ago

10.22.0

4 years ago

10.21.0

4 years ago

10.20.0

4 years ago

10.19.0

4 years ago

10.18.7-canary.5

4 years ago

10.18.7-canary.6

4 years ago

10.18.7-canary.7

4 years ago

10.18.7-canary.4

4 years ago

10.18.7-canary.3

4 years ago

10.18.7-canary.2

4 years ago

10.18.7-canary.1

4 years ago

10.18.6-canary.1

4 years ago

10.18.7-canary.0

4 years ago

10.18.5-canary.4

4 years ago

10.18.6-canary.0

4 years ago

10.18.5-canary.3

4 years ago

10.18.5-canary.2

4 years ago

10.18.5-canary.1

4 years ago

10.18.5-canary.0

4 years ago

10.18.4

4 years ago

10.18.4-canary.9

4 years ago

10.18.4-canary.8

4 years ago

10.18.4-canary.7

4 years ago

10.18.4-canary.6

4 years ago

10.18.4-canary.3

4 years ago

10.18.4-canary.4

4 years ago

10.18.4-canary.5

4 years ago

10.18.4-canary.1

4 years ago

10.18.4-canary.2

4 years ago

10.18.4-canary.0

4 years ago

10.18.3-canary.2

4 years ago

10.18.3-canary.3

4 years ago

10.18.3-canary.1

4 years ago

10.18.3-canary.0

4 years ago

10.18.2-canary.3

4 years ago

10.18.2-canary.2

4 years ago

10.18.2-canary.1

4 years ago

10.17.1-canary.3

4 years ago

10.17.1-canary.2

4 years ago

10.18.1-canary.0

4 years ago

10.18.2-canary.0

4 years ago

10.17.1-canary.1

4 years ago

10.17.1-canary.0

4 years ago

10.17.0

4 years ago

10.16.1-canary.8

4 years ago

10.16.1-canary.7

4 years ago

10.16.1-canary.6

4 years ago

10.16.1-canary.5

4 years ago

10.16.1-canary.4

4 years ago

10.16.1-canary.3

4 years ago

10.16.1-canary.2

4 years ago

10.16.1-canary.1

4 years ago

10.16.1-canary.0

4 years ago

10.16.0

4 years ago

10.15.2-canary.4

4 years ago

10.15.2-canary.0

4 years ago

10.15.2-canary.2

4 years ago

10.15.2-canary.3

4 years ago

10.15.1-canary.6

4 years ago

10.15.1

4 years ago

10.15.1-canary.4

4 years ago

10.15.0

4 years ago

10.14.3-canary.4

4 years ago

10.14.1

4 years ago

10.14.1-canary.7

4 years ago

10.13.0

4 years ago

11.0.0-alpha.11

4 years ago

11.0.0-alpha.10

4 years ago

11.0.0-alpha.9

4 years ago

11.0.0-alpha.6

4 years ago

11.0.0-alpha.7

4 years ago

11.0.0-alpha.8

4 years ago

11.0.0-alpha.5

4 years ago

11.0.0-alpha.4

4 years ago

11.0.0-alpha.3

4 years ago

11.0.0-alpha.2

4 years ago

11.0.0-alpha.1

4 years ago

11.0.0-alpha.0

4 years ago