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 [email protected]

Link

Story Book Link to TimePicker

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_time-picker

Import component

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

Usage

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

Image

Sample Code

<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<Theme> | { } | 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 |