npm package: @licuido-ui/ui_date-picker
Description: The Date Picker component lets the user select a date.
Latest version: 0.0.4

# DatePicker

The Date Picker component lets the user select a date.

### Author

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

## Link

[Story Book Link DatePicker](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_date-picker
```

## Import component

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

## Usage

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

## Image

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

## Sample Code

```jsx
<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**              | \(\)=&gt;\{\}                           | \(\) ={}                   | \-                                                |
| **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&lt;\{\}&gt;               | \{ \}                      | 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              | -                                                 |