@licuido-ui/ui_time-picker NPM

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

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

alt text

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

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/react

3.0.4

8 months ago