Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-time-picker
Advanced tools
react-time-picker - npm Package Compare versions
Comparing version 6.5.2 to 6.6.0
@@ -11,43 +11,262 @@ import React from 'react'; | ||
| export type TimePickerProps = { | ||
| /** | ||
| * `aria-label` for the AM/PM select input. | ||
| * | ||
| * @example 'Select AM/PM' | ||
| */ | ||
| amPmAriaLabel?: string; | ||
| /** | ||
| * Automatically focuses the input on mount. | ||
| * | ||
| * @example true | ||
| */ | ||
| autoFocus?: boolean; | ||
| /** | ||
| * Class name(s) that will be added along with `"react-time-picker"` to the main React-Time-Picker `<div>` element. | ||
| * | ||
| * @example 'class1 class2' | ||
| * @example ['class1', 'class2 class3'] | ||
| */ | ||
| className?: ClassName; | ||
| /** | ||
| * `aria-label` for the clear button. | ||
| * | ||
| * @example 'Clear value' | ||
| */ | ||
| clearAriaLabel?: string; | ||
| /** | ||
| * Content of the clear button. Setting the value explicitly to `null` will hide the icon. | ||
| * | ||
| * @example 'Clear' | ||
| * @example <ClearIcon /> | ||
| * @example ClearIcon | ||
| */ | ||
| clearIcon?: IconOrRenderFunction | null; | ||
| /** | ||
| * `aria-label` for the clock button. | ||
| * | ||
| * @example 'Toggle clock' | ||
| */ | ||
| clockAriaLabel?: string; | ||
| /** | ||
| * Class name(s) that will be added along with `"react-clock"` to the main React-Clock `<time>` element. | ||
| * | ||
| * @example 'class1 class2' | ||
| * @example ['class1', 'class2 class3'] | ||
| */ | ||
| clockClassName?: ClassName; | ||
| /** | ||
| * Content of the clock button. Setting the value explicitly to `null` will hide the icon. | ||
| * | ||
| * @example 'Clock' | ||
| * @example <ClockIcon /> | ||
| * @example ClockIcon | ||
| */ | ||
| clockIcon?: IconOrRenderFunction | null; | ||
| /** | ||
| * Whether to close the clock on value selection. | ||
| * | ||
| * **Note**: It's recommended to use `shouldCloseClock` function instead. | ||
| * | ||
| * @default true | ||
| * @example false | ||
| */ | ||
| closeClock?: boolean; | ||
| /** | ||
| * `data-testid` attribute for the main React-Time-Picker `<div>` element. | ||
| * | ||
| * @example 'time-picker' | ||
| */ | ||
| 'data-testid'?: string; | ||
| /** | ||
| * When set to `true`, will remove the clock and the button toggling its visibility. | ||
| * | ||
| * @default false | ||
| * @example true | ||
| */ | ||
| disableClock?: boolean; | ||
| /** | ||
| * Whether the time picker should be disabled. | ||
| * | ||
| * @default false | ||
| * @example true | ||
| */ | ||
| disabled?: boolean; | ||
| /** | ||
| * Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`. | ||
| * | ||
| * **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | ||
| * | ||
| * @example 'h:m:s a' | ||
| */ | ||
| format?: string; | ||
| /** | ||
| * `aria-label` for the hour input. | ||
| * | ||
| * @example 'Hour' | ||
| */ | ||
| hourAriaLabel?: string; | ||
| /** | ||
| * `placeholder` for the hour input. | ||
| * | ||
| * @default '--' | ||
| * @example 'hh' | ||
| */ | ||
| hourPlaceholder?: string; | ||
| /** | ||
| * `id` attribute for the main React-TimeRange-Picker `<div>` element. | ||
| * | ||
| * @example 'time-picker' | ||
| */ | ||
| id?: string; | ||
| /** | ||
| * Whether the clock should be opened. | ||
| * | ||
| * @default false | ||
| * @example true | ||
| */ | ||
| isOpen?: boolean; | ||
| /** | ||
| * Locale that should be used by the datetime picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | ||
| * | ||
| * **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | ||
| * | ||
| * @example 'hu-HU' | ||
| */ | ||
| locale?: string; | ||
| /** | ||
| * How detailed time picking shall be. Can be `"hour"`, `"minute"` or `"second"`. | ||
| * | ||
| * @default 'minute' | ||
| * @example 'second' | ||
| */ | ||
| maxDetail?: Detail; | ||
| /** | ||
| * Maximum date that the user can select. | ||
| * | ||
| * @example new Date() | ||
| * @example '22:15:00' | ||
| */ | ||
| maxTime?: string; | ||
| /** | ||
| * Minimum date that the user can select. | ||
| * | ||
| * @example new Date() | ||
| * @example '22:15:00' | ||
| */ | ||
| minTime?: string; | ||
| /** | ||
| * `aria-label` for the minute input. | ||
| * | ||
| * @example 'Minute' | ||
| */ | ||
| minuteAriaLabel?: string; | ||
| /** | ||
| * `placeholder` for the minute input. | ||
| * | ||
| * @default '--' | ||
| * @example 'mm' | ||
| */ | ||
| minutePlaceholder?: string; | ||
| /** | ||
| * Input name. | ||
| * | ||
| * @default 'time' | ||
| */ | ||
| name?: string; | ||
| /** | ||
| * `aria-label` for the native time input. | ||
| * | ||
| * @example 'Time' | ||
| */ | ||
| nativeInputAriaLabel?: string; | ||
| /** | ||
| * Function called when the user picks a valid time. | ||
| * | ||
| * @example (value) => alert('New time is: ', value) | ||
| */ | ||
| onChange?: (value: Value) => void; | ||
| /** | ||
| * Function called when the clock closes. | ||
| * | ||
| * @example () => alert('Clock closed') | ||
| */ | ||
| onClockClose?: () => void; | ||
| /** | ||
| * Function called when the clock opens. | ||
| * | ||
| * @example () => alert('Clock opened') | ||
| */ | ||
| onClockOpen?: () => void; | ||
| /** | ||
| * Function called when the user focuses an input. | ||
| * | ||
| * @example (event) => alert('Focused input: ', event.target.name) | ||
| */ | ||
| onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void; | ||
| /** | ||
| * Function called when the user picks an invalid time. | ||
| * | ||
| * @example () => alert('Invalid time') | ||
| */ | ||
| onInvalidChange?: () => void; | ||
| /** | ||
| * Whether to open the clock on input focus. | ||
| * | ||
| * **Note**: It's recommended to use `shouldOpenClock` function instead. | ||
| * | ||
| * @default true | ||
| * @example false | ||
| */ | ||
| openClockOnFocus?: boolean; | ||
| /** | ||
| * Element to render the clock in using portal. | ||
| * | ||
| * @example document.getElementById('my-div') | ||
| */ | ||
| portalContainer?: HTMLElement | null; | ||
| /** | ||
| * Whether time input should be required. | ||
| * | ||
| * @default false | ||
| * @example true | ||
| */ | ||
| required?: boolean; | ||
| /** | ||
| * `aria-label` for the second input. | ||
| * | ||
| * @example 'Second' | ||
| */ | ||
| secondAriaLabel?: string; | ||
| /** | ||
| * `placeholder` for the second input. | ||
| * | ||
| * @default '--' | ||
| * @example 'ss' | ||
| */ | ||
| secondPlaceholder?: string; | ||
| /** | ||
| * Function called before the clock closes. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. If it returns `false`, the clock will not close. | ||
| * | ||
| * @example ({ reason }) => reason !== 'outsideAction' | ||
| */ | ||
| shouldCloseClock?: ({ reason }: { | ||
| reason: CloseReason; | ||
| }) => boolean; | ||
| /** | ||
| * Function called before the clock opens. `reason` can be `"buttonClick"` or `"focus"`. If it returns `false`, the clock will not open. | ||
| * | ||
| * @example ({ reason }) => reason !== 'focus' | ||
| */ | ||
| shouldOpenClock?: ({ reason }: { | ||
| reason: OpenReason; | ||
| }) => boolean; | ||
| /** | ||
| * Input value. Note that if you pass an array of values, only first value will be fully utilized. | ||
| * | ||
| * @example new Date(2017, 0, 1, 22, 15) | ||
| * @example '22:15:00' | ||
| * @example [new Date(2017, 0, 1, 22, 15), new Date(2017, 0, 1, 23, 45)] | ||
| * @example ["22:15:00", "23:45:00"] | ||
| */ | ||
| value?: LooseValue; | ||
@@ -54,0 +273,0 @@ } & ClockProps & Omit<EventProps, 'onChange' | 'onFocus'>; |
@@ -11,43 +11,262 @@ import React from 'react'; | ||
| export type TimePickerProps = { | ||
| /** | ||
| * `aria-label` for the AM/PM select input. | ||
| * | ||
| * @example 'Select AM/PM' | ||
| */ | ||
| amPmAriaLabel?: string; | ||
| /** | ||
| * Automatically focuses the input on mount. | ||
| * | ||
| * @example true | ||
| */ | ||
| autoFocus?: boolean; | ||
| /** | ||
| * Class name(s) that will be added along with `"react-time-picker"` to the main React-Time-Picker `<div>` element. | ||
| * | ||
| * @example 'class1 class2' | ||
| * @example ['class1', 'class2 class3'] | ||
| */ | ||
| className?: ClassName; | ||
| /** | ||
| * `aria-label` for the clear button. | ||
| * | ||
| * @example 'Clear value' | ||
| */ | ||
| clearAriaLabel?: string; | ||
| /** | ||
| * Content of the clear button. Setting the value explicitly to `null` will hide the icon. | ||
| * | ||
| * @example 'Clear' | ||
| * @example <ClearIcon /> | ||
| * @example ClearIcon | ||
| */ | ||
| clearIcon?: IconOrRenderFunction | null; | ||
| /** | ||
| * `aria-label` for the clock button. | ||
| * | ||
| * @example 'Toggle clock' | ||
| */ | ||
| clockAriaLabel?: string; | ||
| /** | ||
| * Class name(s) that will be added along with `"react-clock"` to the main React-Clock `<time>` element. | ||
| * | ||
| * @example 'class1 class2' | ||
| * @example ['class1', 'class2 class3'] | ||
| */ | ||
| clockClassName?: ClassName; | ||
| /** | ||
| * Content of the clock button. Setting the value explicitly to `null` will hide the icon. | ||
| * | ||
| * @example 'Clock' | ||
| * @example <ClockIcon /> | ||
| * @example ClockIcon | ||
| */ | ||
| clockIcon?: IconOrRenderFunction | null; | ||
| /** | ||
| * Whether to close the clock on value selection. | ||
| * | ||
| * **Note**: It's recommended to use `shouldCloseClock` function instead. | ||
| * | ||
| * @default true | ||
| * @example false | ||
| */ | ||
| closeClock?: boolean; | ||
| /** | ||
| * `data-testid` attribute for the main React-Time-Picker `<div>` element. | ||
| * | ||
| * @example 'time-picker' | ||
| */ | ||
| 'data-testid'?: string; | ||
| /** | ||
| * When set to `true`, will remove the clock and the button toggling its visibility. | ||
| * | ||
| * @default false | ||
| * @example true | ||
| */ | ||
| disableClock?: boolean; | ||
| /** | ||
| * Whether the time picker should be disabled. | ||
| * | ||
| * @default false | ||
| * @example true | ||
| */ | ||
| disabled?: boolean; | ||
| /** | ||
| * Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`. | ||
| * | ||
| * **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | ||
| * | ||
| * @example 'h:m:s a' | ||
| */ | ||
| format?: string; | ||
| /** | ||
| * `aria-label` for the hour input. | ||
| * | ||
| * @example 'Hour' | ||
| */ | ||
| hourAriaLabel?: string; | ||
| /** | ||
| * `placeholder` for the hour input. | ||
| * | ||
| * @default '--' | ||
| * @example 'hh' | ||
| */ | ||
| hourPlaceholder?: string; | ||
| /** | ||
| * `id` attribute for the main React-TimeRange-Picker `<div>` element. | ||
| * | ||
| * @example 'time-picker' | ||
| */ | ||
| id?: string; | ||
| /** | ||
| * Whether the clock should be opened. | ||
| * | ||
| * @default false | ||
| * @example true | ||
| */ | ||
| isOpen?: boolean; | ||
| /** | ||
| * Locale that should be used by the datetime picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | ||
| * | ||
| * **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | ||
| * | ||
| * @example 'hu-HU' | ||
| */ | ||
| locale?: string; | ||
| /** | ||
| * How detailed time picking shall be. Can be `"hour"`, `"minute"` or `"second"`. | ||
| * | ||
| * @default 'minute' | ||
| * @example 'second' | ||
| */ | ||
| maxDetail?: Detail; | ||
| /** | ||
| * Maximum date that the user can select. | ||
| * | ||
| * @example new Date() | ||
| * @example '22:15:00' | ||
| */ | ||
| maxTime?: string; | ||
| /** | ||
| * Minimum date that the user can select. | ||
| * | ||
| * @example new Date() | ||
| * @example '22:15:00' | ||
| */ | ||
| minTime?: string; | ||
| /** | ||
| * `aria-label` for the minute input. | ||
| * | ||
| * @example 'Minute' | ||
| */ | ||
| minuteAriaLabel?: string; | ||
| /** | ||
| * `placeholder` for the minute input. | ||
| * | ||
| * @default '--' | ||
| * @example 'mm' | ||
| */ | ||
| minutePlaceholder?: string; | ||
| /** | ||
| * Input name. | ||
| * | ||
| * @default 'time' | ||
| */ | ||
| name?: string; | ||
| /** | ||
| * `aria-label` for the native time input. | ||
| * | ||
| * @example 'Time' | ||
| */ | ||
| nativeInputAriaLabel?: string; | ||
| /** | ||
| * Function called when the user picks a valid time. | ||
| * | ||
| * @example (value) => alert('New time is: ', value) | ||
| */ | ||
| onChange?: (value: Value) => void; | ||
| /** | ||
| * Function called when the clock closes. | ||
| * | ||
| * @example () => alert('Clock closed') | ||
| */ | ||
| onClockClose?: () => void; | ||
| /** | ||
| * Function called when the clock opens. | ||
| * | ||
| * @example () => alert('Clock opened') | ||
| */ | ||
| onClockOpen?: () => void; | ||
| /** | ||
| * Function called when the user focuses an input. | ||
| * | ||
| * @example (event) => alert('Focused input: ', event.target.name) | ||
| */ | ||
| onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void; | ||
| /** | ||
| * Function called when the user picks an invalid time. | ||
| * | ||
| * @example () => alert('Invalid time') | ||
| */ | ||
| onInvalidChange?: () => void; | ||
| /** | ||
| * Whether to open the clock on input focus. | ||
| * | ||
| * **Note**: It's recommended to use `shouldOpenClock` function instead. | ||
| * | ||
| * @default true | ||
| * @example false | ||
| */ | ||
| openClockOnFocus?: boolean; | ||
| /** | ||
| * Element to render the clock in using portal. | ||
| * | ||
| * @example document.getElementById('my-div') | ||
| */ | ||
| portalContainer?: HTMLElement | null; | ||
| /** | ||
| * Whether time input should be required. | ||
| * | ||
| * @default false | ||
| * @example true | ||
| */ | ||
| required?: boolean; | ||
| /** | ||
| * `aria-label` for the second input. | ||
| * | ||
| * @example 'Second' | ||
| */ | ||
| secondAriaLabel?: string; | ||
| /** | ||
| * `placeholder` for the second input. | ||
| * | ||
| * @default '--' | ||
| * @example 'ss' | ||
| */ | ||
| secondPlaceholder?: string; | ||
| /** | ||
| * Function called before the clock closes. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. If it returns `false`, the clock will not close. | ||
| * | ||
| * @example ({ reason }) => reason !== 'outsideAction' | ||
| */ | ||
| shouldCloseClock?: ({ reason }: { | ||
| reason: CloseReason; | ||
| }) => boolean; | ||
| /** | ||
| * Function called before the clock opens. `reason` can be `"buttonClick"` or `"focus"`. If it returns `false`, the clock will not open. | ||
| * | ||
| * @example ({ reason }) => reason !== 'focus' | ||
| */ | ||
| shouldOpenClock?: ({ reason }: { | ||
| reason: OpenReason; | ||
| }) => boolean; | ||
| /** | ||
| * Input value. Note that if you pass an array of values, only first value will be fully utilized. | ||
| * | ||
| * @example new Date(2017, 0, 1, 22, 15) | ||
| * @example '22:15:00' | ||
| * @example [new Date(2017, 0, 1, 22, 15), new Date(2017, 0, 1, 23, 45)] | ||
| * @example ["22:15:00", "23:45:00"] | ||
| */ | ||
| value?: LooseValue; | ||
@@ -54,0 +273,0 @@ } & ClockProps & Omit<EventProps, 'onChange' | 'onFocus'>; |
| { | ||
| "name": "react-time-picker", | ||
| "version": "6.5.2", | ||
| "version": "6.6.0", | ||
| "description": "A time picker for your React app.", | ||
@@ -104,3 +104,3 @@ "type": "module", | ||
| "test": "yarn lint && yarn tsc && yarn prettier && yarn unit", | ||
| "tsc": "tsc --noEmit", | ||
| "tsc": "tsc", | ||
| "unit": "vitest", | ||
@@ -131,3 +131,3 @@ "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & nodemon --watch src --ext css --exec \"yarn copy-styles\"" | ||
| "@testing-library/dom": "^9.0.0", | ||
| "@testing-library/jest-dom": "^5.15.0", | ||
| "@testing-library/jest-dom": "^6.0.0", | ||
| "@testing-library/react": "^14.0.0", | ||
@@ -146,4 +146,4 @@ "@testing-library/user-event": "^14.4.0", | ||
| "rimraf": "^3.0.0", | ||
| "typescript": "^5.0.0", | ||
| "vitest": "^0.34.0", | ||
| "typescript": "^5.3.2", | ||
| "vitest": "^1.0.2", | ||
| "vitest-canvas-mock": "^0.2.2" | ||
@@ -150,0 +150,0 @@ }, |
@@ -1,2 +0,2 @@ | ||
| [](https://www.npmjs.com/package/react-time-picker)  [](https://github.com/wojtekmaj/react-time-picker/actions) | ||
| [](https://www.npmjs.com/package/react-time-picker)  [](https://github.com/wojtekmaj/react-time-picker/actions) | ||
@@ -20,3 +20,3 @@ # React-Time-Picker | ||
| [Online demo](http://projects.wojtekmaj.pl/react-time-picker/) is also available! | ||
| [Online demo](https://projects.wojtekmaj.pl/react-time-picker/) is also available! | ||
@@ -82,41 +82,42 @@ ## Looking for a date picker or a datetime picker? | ||
| | Prop name | Description | Default value | Example values | | ||
| | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | amPmAriaLabel | `aria-label` for the AM/PM select input. | n/a | `"Select AM/PM"` | | ||
| | autoFocus | Automatically focuses the input on mount. | n/a | `true` | | ||
| | className | Class name(s) that will be added along with `"react-time-picker"` to the main React-Time-Picker `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> | | ||
| | clearAriaLabel | `aria-label` for the clear button. | n/a | `"Clear value"` | | ||
| | clearIcon | Content of the clear button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li><li>React function: `ClearIcon`</li></ul> | | ||
| | clockAriaLabel | `aria-label` for the clock button. | n/a | `"Toggle clock"` | | ||
| | clockClassName | Class name(s) that will be added along with `"react-clock"` to the main React-Clock `<time>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> | | ||
| | clockIcon | Content of the clock button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Clock"`</li><li>React element: `<ClockIcon />`</li><li>React function: `ClockIcon`</li></ul> | | ||
| | closeClock | Whether to close the clock on value selection. **Note**: It's recommended to use shouldCloseClock function instead. | `true` | `false` | | ||
| | data-testid | `data-testid` attribute for the main React-Time-Picker `<div>` element. | n/a | `"date-picker"` | | ||
| | disabled | Whether the time picker should be disabled. | `false` | `true` | | ||
| | disableClock | When set to `true`, will remove the clock and the button toggling its visibility. | `false` | `true` | | ||
| | format | Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`. | n/a | `"h:m:s a"` | | ||
| | hourAriaLabel | `aria-label` for the hour input. | n/a | `"Hour"` | | ||
| | hourPlaceholder | `placeholder` for the hour input. | `"--"` | `"hh"` | | ||
| | isOpen | Whether the clock should be opened. | `false` | `true` | | ||
| | locale | Locale that should be used by the time picker and the clock. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | User's browser settings | `"hu-HU"` | | ||
| | maxDetail | How detailed time picking shall be. Can be `"hour"`, `"minute"` or `"second"`. | `"minute"` | `"second"` | | ||
| | maxTime | Maximum time that the user can select. | n/a | <ul><li>Date: `new Date()`</li><li>String: `"22:15:00"`</li></ul> | | ||
| | minTime | Minimum date that the user can select. | n/a | <ul><li>Date: `new Date()`</li><li>String: `"22:15:00"`</li></ul> | | ||
| | minuteAriaLabel | `aria-label` for the minute input. | n/a | `"Minute"` | | ||
| | minutePlaceholder | `placeholder` for the minute input. | `"--"` | `"mm"` | | ||
| | name | Input name. | `"time"` | `"myCustomName"` | | ||
| | nativeInputAriaLabel | `aria-label` for the native time input. | n/a | `"Time"` | | ||
| | onChange | Function called when the user picks a valid time. | n/a | `(value) => alert('New time is: ', value)` | | ||
| | onClockClose | Function called when the clock closes. | n/a | `() => alert('Clock closed')` | | ||
| | onClockOpen | Function called when the clock opens. | n/a | `() => alert('Clock opened')` | | ||
| | onFocus | Function called when the focuses an input. | n/a | `(event) => alert('Focused input: ', event.target.name)` | | ||
| | onInvalidChange | Function called when the user picks an invalid time. | n/a | `() => alert('Invalid time')` | | ||
| | openClockOnFocus | Whether to open the clock on input focus. **Note**: It's recommended to use shouldOpenClock function instead. | `true` | `false` | | ||
| | portalContainer | Element to render the clock in using portal. | n/a | `document.getElementById('my-div')` | | ||
| | required | Whether date input should be required. | `false` | `true` | | ||
| | secondAriaLabel | `aria-label` for the second input. | n/a | `"Second"` | | ||
| | secondPlaceholder | `placeholder` for the second input. | `"--"` | `"ss"` | | ||
| | shouldCloseClock | Function called before the clock closes. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. If it returns `false`, the clock will not close. | n/a | `({ reason }) => reason !== 'outsideAction'` | | ||
| | shouldOpenClock | Function called before the clock opens. `reason` can be `"buttonClick"` or `"focus"`. If it returns `false`, the clock will not open. | n/a | `({ reason }) => reason !== 'focus'` | | ||
| | value | Input value. Note that if you pass an array of values, only first value will be fully utilized. | n/a | <ul><li>Date: `new Date(2017, 0, 1, 22, 15)`</li><li>String: `"22:15:00"`</li><li>An array of dates: `[new Date(2017, 0, 1, 22, 15), new Date(2017, 0, 1, 23, 45)]`</li><li>An array of strings: `["22:15:00", "23:45:00"]`</li></ul> | | ||
| | Prop name | Description | Default value | Example values | | ||
| | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | amPmAriaLabel | `aria-label` for the AM/PM select input. | n/a | `"Select AM/PM"` | | ||
| | autoFocus | Automatically focuses the input on mount. | n/a | `true` | | ||
| | className | Class name(s) that will be added along with `"react-time-picker"` to the main React-Time-Picker `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> | | ||
| | clearAriaLabel | `aria-label` for the clear button. | n/a | `"Clear value"` | | ||
| | clearIcon | Content of the clear button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li><li>React function: `ClearIcon`</li></ul> | | ||
| | clockAriaLabel | `aria-label` for the clock button. | n/a | `"Toggle clock"` | | ||
| | clockClassName | Class name(s) that will be added along with `"react-clock"` to the main React-Clock `<time>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> | | ||
| | clockIcon | Content of the clock button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Clock"`</li><li>React element: `<ClockIcon />`</li><li>React function: `ClockIcon`</li></ul> | | ||
| | closeClock | Whether to close the clock on value selection. **Note**: It's recommended to use `shouldCloseClock` function instead. | `true` | `false` | | ||
| | data-testid | `data-testid` attribute for the main React-Time-Picker `<div>` element. | n/a | `"time-picker"` | | ||
| | disableClock | When set to `true`, will remove the clock and the button toggling its visibility. | `false` | `true` | | ||
| | disabled | Whether the time picker should be disabled. | `false` | `true` | | ||
| | format | Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`. **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | n/a | `"h:m:s a"` | | ||
| | hourAriaLabel | `aria-label` for the hour input. | n/a | `"Hour"` | | ||
| | hourPlaceholder | `placeholder` for the hour input. | `"--"` | `"hh"` | | ||
| | id | `id` attribute for the main React-Time-Picker `<div>` element. | n/a | `"time-picker"` | | ||
| | isOpen | Whether the clock should be opened. | `false` | `true` | | ||
| | locale | Locale that should be used by the time picker and the clock. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | Server locale/User's browser settings | `"hu-HU"` | | ||
| | maxDetail | How detailed time picking shall be. Can be `"hour"`, `"minute"` or `"second"`. | `"minute"` | `"second"` | | ||
| | maxTime | Maximum time that the user can select. | n/a | <ul><li>Date: `new Date()`</li><li>String: `"22:15:00"`</li></ul> | | ||
| | minTime | Minimum date that the user can select. | n/a | <ul><li>Date: `new Date()`</li><li>String: `"22:15:00"`</li></ul> | | ||
| | minuteAriaLabel | `aria-label` for the minute input. | n/a | `"Minute"` | | ||
| | minutePlaceholder | `placeholder` for the minute input. | `"--"` | `"mm"` | | ||
| | name | Input name. | `"time"` | `"myCustomName"` | | ||
| | nativeInputAriaLabel | `aria-label` for the native time input. | n/a | `"Time"` | | ||
| | onChange | Function called when the user picks a valid time. | n/a | `(value) => alert('New time is: ', value)` | | ||
| | onClockClose | Function called when the clock closes. | n/a | `() => alert('Clock closed')` | | ||
| | onClockOpen | Function called when the clock opens. | n/a | `() => alert('Clock opened')` | | ||
| | onFocus | Function called when the user focuses an input. | n/a | `(event) => alert('Focused input: ', event.target.name)` | | ||
| | onInvalidChange | Function called when the user picks an invalid time. | n/a | `() => alert('Invalid time')` | | ||
| | openClockOnFocus | Whether to open the clock on input focus. **Note**: It's recommended to use `shouldOpenClock` function instead. | `true` | `false` | | ||
| | portalContainer | Element to render the clock in using portal. | n/a | `document.getElementById('my-div')` | | ||
| | required | Whether time input should be required. | `false` | `true` | | ||
| | secondAriaLabel | `aria-label` for the second input. | n/a | `"Second"` | | ||
| | secondPlaceholder | `placeholder` for the second input. | `"--"` | `"ss"` | | ||
| | shouldCloseClock | Function called before the clock closes. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. If it returns `false`, the clock will not close. | n/a | `({ reason }) => reason !== 'outsideAction'` | | ||
| | shouldOpenClock | Function called before the clock opens. `reason` can be `"buttonClick"` or `"focus"`. If it returns `false`, the clock will not open. | n/a | `({ reason }) => reason !== 'focus'` | | ||
| | value | Input value. Note that if you pass an array of values, only first value will be fully utilized. | n/a | <ul><li>Date: `new Date(2017, 0, 1, 22, 15)`</li><li>String: `"22:15:00"`</li><li>An array of dates: `[new Date(2017, 0, 1, 22, 15), new Date(2017, 0, 1, 23, 45)]`</li><li>An array of strings: `["22:15:00", "23:45:00"]`</li></ul> | | ||
@@ -123,0 +124,0 @@ ### Clock |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by8.26%
306793
- Lines of code
- increased by10.75%
6768
- Number of lines in readme file
- increased by0.71%
142
No dependency changes