@licuido-ui/ui_date-picker NPM

DatePicker

The Date Picker component lets the user select a date.

Author

@author Henry Dyson J henry@crayond.co

Link

Story Book Link DatePicker

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_date-picker

Import component

import { DatePicker } from '@licuido-ui/ui_date-picker';

Usage

<DatePicker dateFormat={'DD-MM-YYYY'} />

Image

alt text

Sample Code

<DatePicker
  onChangeFun={() => false}
  views={['year', 'month', 'day']}
  inputStyleRoot={{}}
  dateFormat={'DD MMM YY'}
  disablePast={false}
  disableFuture={false}
  iconPosition={'left'}
  hoverInputColor={'#B2ADEB'}
  focusedInputColor={'#665CD7'}
  inputRootStyle={{}}
  defaultBorderColor={'#E9E9E9'}
  calenderBorderColor={'#665CD7'}
  calendarBackgroundColor={''}
  pickersLayoutStyle={}
  MobilePickersLayoutStyle={}
/>

Props

Name	Description	Default	Control
variant	'filled' `or` 'outlined' `or` 'outlined	'outlined'	'outlined'
onChangeFun	()=>{}	() ={}	-
views	[year ,month ,date]	[year ,month ,date]	[year ,month ,date]
inputStyleRoot	object	{ }	inputStyleRoot : {}
dateFormat	DD MMM YYstring	"DD MMM YY"	DD MMM YY
disablePast	boolean	false	False `or` True
disableFuture	boolean	false	False `or` True
OpenPickerIcon	ReactNode	ReactNode	ReactNode
iconPosition	left	right `or` left `or` right	"left"	left
hoverInputColor	string	"#B2ADEB"	linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))
focusedInputColor	string	"#665CD7"	linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))
inputRootStyle	objectSxProps<{}>	{ }	inputRootStyle : {}
defaultBorderColor	string	"#E9E9E9"	linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))
calenderBorderColor	string	"#665CD7"	linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))
calendarBackgroundColor	string	"#665CD7"	linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))
className	string	-	Set string
sx		{}	Set object string
label	The label content.string	-	Set string
pickersLayoutStyle	objectSxProps:{}	objectSxProps	-
mobilePickersLayoutStyle	objectSxProps:{}	objectSxProps	-

@emotion/react @emotion/styled @mui/material @mui/x-date-pickers dayjs react react-dom

@licuido-ui/react

0.0.4

8 months ago