DatePicker

The Date Picker component lets the user select a date.

Author

• @author Henry Dyson J [email protected]

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

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 | - |