npm package: @licuido-ui/ui_time-picker
Description: The time picker component is used to select or schedule a specific time or a range of times.
Latest version: 3.0.4

# Time Picker

The time picker component is used to select or schedule a specific time or a range of times.

### Author

- @author Henry Dyson J <henry@crayond.co>

## Link

[Story Book Link to TimePicker](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_time-picker
```

## Import component

```jsx
import { TimePicker } from '@licuido-ui/ui_time-picker';
```

## Usage

```jsx
<Switch label={'My Label'} isLabel={true} />
```

## Image

![alt text](./TimePicker.png)

## Sample Code

```jsx
<TimePicker
        value={value}
        onChange={(val: Dayjs | null) => setValue(val)}
        onAccept={(val) => console.log(val, 'iui')}
        headerData={[
          { id: '1', label: 'HH' },
          { id: '2', label: 'MM' },
          { id: '2', label: 'Period' },
        ]}
      />
```

## Props

| **Name**                   | **Description**                                                                                              | **Default** | **Control ** |
| -------------------------- | ------------------------------------------------------------------------------------------------------------ | ----------- | ------------ |
| **id**                     | string                                                                                                       | string      |
| **className**              | string                                                                                                       | ""          |
| **sx**                     | The system prop that allows defining system overrides as well as additional CSS styles\.SxProps&lt;Theme&gt; | \{ \}       | sx : \{\}    |
|                            |
| **value**                  | Daysjs                                                                                                       | Daysjs      | Daysjs       |
| **headerData**             | []                                                                                                           | []          | []           |
| **onChange**               | ()=>{}                                                                                                       | ()=>{}      | ()=>{}       |
| **onAccept**               | ()=>{}                                                                                                       | ()=>{}      | ()=>{}       |
| **listRootStyle**          | SxProps                                                                                                      | SxProps     | SxProps      |
| **paperRootStyle**         | SxProps                                                                                                      | SxProps     | SxProps {}   |
| **menuItemRootStyle**      | SxProps                                                                                                      | SxProps     | SxProps{}    |
| **digitalClockStyle**      | SxProps                                                                                                      | SxProps     | SxProps{}    |
| **pickersLayoutRootStyle** | SxProps                                                                                                      | SxProps     | SxProps{}    |
| **dialogActionsRootStyle** | SxProps                                                                                                      | SxProps     | SxProps{}    |
| **submitButtonStyle**      | SxProps                                                                                                      | SxProps     | SxProps{}    |
| **inputRootstyle**         | SxProps                                                                                                      | SxProps     | SxProps{}    |
| **headerTitleStyle**       | SxProps                                                                                                      | SxProps     | SxProps{}    |
| **cardWidth**              | number                                                                                                       | number      | number       | number |
| **headerBgColor**          | string                                                                                                       | string      | string       |
| **required**               | boolean                                                                                                      | boolean     | boolean      |
| **fullWidth**              | boolean                                                                                                      | boolean     | boolean      |
| **error**                  | boolean                                                                                                      | boolean     | boolean      |

| **disabled**  | boolean                                                                                             | boolean | boolean       |

| **placeholder**  | string                                                                                             | string | string       |

| **inputRootStyle**  | SxProp                                                                                             | SxProp | SxProp       |
| **clockMarginTopToInput**  | number                                                                                             | number | number       |
| **isErrorRequired**  | boolean                                                                                             | boolean | boolean       |
| **errorMessage**  | string                                                                                             | string | string       |
| **errorStyle**  | sxProp                                                                                             | sxProp | sxProp       |