Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@commercetools-uikit/time-input
Advanced tools
Readme
The TimeInput
component allows the user to select a time.
It formats the selected date depending on the locale.
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
import TimeInput from '@commercetools-uikit/time-input';
const Example = () => <TimeInput value="14:00" onChange={() => {}} />;
export default Example;
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 | 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 | 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 | ||
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.
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.
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'); // -> ''
FAQs
The TimeInput component allows the user to select a time.
The npm package @commercetools-uikit/time-input receives a total of 4,132 weekly downloads. As such, @commercetools-uikit/time-input popularity was classified as popular.
We found that @commercetools-uikit/time-input demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.