untitled-timepicker v1.0.2
Untitled TimePicker
A simple reusable time picking component for React apps.
Installation
Install using npm:
npm install --save untitled-timepickerInstall using yarn:
yarn add untitled-timepickerUsage
Here is a basic example of displaying the Untitled TimePicker in a React app.
// import the library
import TimePicker from "untitled-timepicker";
// import styles
import "/untitled-timepicker/dist/index.css";
// Callback function which will returned the selected time from the component
const displayTime = (time) => {
console.log(time);
};
function App() {
return <TimePicker timeSelected={displayTime} />;
}
export default App;Prop Options/Configuration
| Prop Name | Type | Default Value | Description |
|---|---|---|---|
timeSelected | func | () => {} | The timeSelected function is called when the user selects a time. This will pass back the string of the selected time. |
defaultTime | string | The defaultTime string is the time that is selected by default.12 Hour example: "09:49 AM"24 Hour example: "09:49" | |
label | string | The label string is the label that is displayed above the time picker. | |
showDropdown | boolean | false | The showDropdown boolean is true if the dropdown is shown when clicking on the input. |
allowInlineEdit | boolean | true | The allowInlineEdit boolean is true if the user can edit the time within the input. |
use24HourForamt | boolean | false | The use24HourFormat boolean is true if the time is displayed in 24 hour format. |
compactMode | boolean | false | The compactMode boolean is true if the time picker is in compact mode. This will display a smaller time picker. |
incrementBy | number | 0 | The incrementBy number is the number of minutes that the time picker increments by.Available options: 5, 10, 15, 30, 60. |
hoursAvailable | array | An array of hours (numbers) that are to be used as the available hours. |
timeSelected
More soon...
defaultTime
More soon...
label
showDropdown
More soon...
allowInlineEdit
use24HourFormat
compactMode
Compact mode in standard 12 hour format
Compact mode in 24 hour mode (use24HourFormat set to true)
incrementBy
This prop is used to specify the incremental amount of minutes that are available to select. For example, if the value 15 was passed, then the available minutes to choose from would be 00, 15, 30, 45. Likewise if the value 10 was supplied, the options 00, 10, 20, 30, 40, 50 would be available for selection.
Here the value 15 was passed
hoursAvailable
In some cases, users may wish to limit the number of hours availble to choose from. This array should include numbers between 1 and 23. Duplicates will automaticall be removed. The hours will also automatically be sorted.
If hoursAvailable is provided an array [1, 2, 3, 4, 5], then the time picker will display the hours "01", "02", "03", "04", and "05".
If hoursAvailble is provided an array, the hour with the smallest value will automatically be selected. In the previous example, "01" would be selected. However, the value of defaultTime will override the hour value in this case.
The array [4, 5, 6] was passed to hoursAvailable
Enjoy!