Untitled TimePicker

A simple reusable time picking component for React apps.

Installation

Install using npm:

npm install --save untitled-timepicker

Install using yarn:

yarn add untitled-timepicker

Usage

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!