npm package: @licuido-ui/ui_date-range-picker
Description: The Date Range Picker let the user select a range of dates.
Latest version: 0.0.6

# DateRangePicker

The Date Range Picker let the user select a range of dates.

### Author

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

## Link

[StoryBook link to DateRangePicker](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-range-picker
```

## Import component

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

## Usage

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

## Image

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

## Sample Code

```jsx
<DateRangePicker
  inputContainerStyle={{}}
  inputBorderColor={'#E9E9E9'}
  inputBorderHoverColor={'#B2ADEB'}
  inputActiveColor={'#665CD7'}
  inputFontsize={14}
  inputValueColor={'#3B3B3B'}
  startLabel={'Check-in'}
  endLabel={'Check-out'}
  inputLabelSize={14}
  inputLabelColor={'#656363'}
  inputStyleRoot={{}}
  selectedRangeBgColor={'#B2ADEB'}
  selectedDateColor={'#000'}
  selectedHoverBgColor={'#EFEEFB'}
  selectedHoverTextColor={'#665CD7'}
  cancelButtonLabel={'cancel'}
  submitButtonLabel={'Submit'}
  buttonFontSize={14}
  buttonLabelColor={'#665CD7'}
  bottomButtonStyle={{}}
  addMoreButtons={[]}
  dateFormat={'DD MMM YY'}
  startViews={['year', 'month', 'day']}
  endViews={['year', 'day']}
  openTo={'day'}
  maxDateEnd={undefined}
  minDateEnd={undefined}
  minDateStart={undefined}
  maxDateStart={undefined}
  calenderPopoverStyle={{}}
  endCalendarStyle={{}}
  startCalendarStyle={{}}
  startCalendarMaxHeight={400}
  startCalendarMinHeight={undefined}
  endCalendarMaxHeight={undefined}
  endCalendarMinHeight={undefined}
  startCalendarHeight={250}
  endCalendarHeight={250}
  rightInputCalendarIcon={''}
  handleEndDateChangeFun={() => false}
  handleStartDateChangeFun={() => false}
  onMonthChangeStartFun={() => false}
  onMonthChangeEndFun={() => false}
  onYearChangeStartFun={() => false}
  onYearChangeEndFun={() => false}
  handleSubmitCalendarFun={() => false}
/>
```

## Props

| **Name**                     | **Description**                         | **Default**               | **Control**                                       |
| ---------------------------- | --------------------------------------- | ------------------------- | ------------------------------------------------- |
| **startVariant**             | 'filled' `or` 'outlined' `or` 'outlined | 'outlined'                | 'outlined'                                        |
| **endVariant**               | 'filled' `or` 'outlined' `or` 'outlined | 'outlined'                | 'outlined'                                        |
| **rangeId**                  | string                                  | string                    | string                                            |
| **inputContainerStyle**      | SxProps&lt;\{\}&gt;                     | \{ \}                     | inputContainerStyle : \{\}                        |
| **inputBorderColor**         | string                                  | "\#E9E9E9"                | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)) |
| **inputBorderHoverColor**    | string                                  | "\#B2ADEB"                | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)) |
| **inputActiveColor**         | string                                  | "\#665CD7"                | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)) |
| **inputFontsize**            | number                                  | 14                        |
| **inputValueColor**          | string                                  | "\#3B3B3B"                | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)) |
| **startLabel**               | string                                  | "Check\-in"               | Check\-in                                         |
| **endLabel**                 | string                                  | "Check\-out"              | Check\-out                                        |
| **inputLabelSize**           | number                                  | 14                        |
| **inputLabelColor**          | string                                  | "\#656363"                | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)) |
| **dateFormat**               | "YYY MM DD"string                       | "DD MMM YY"               | DD MMM YY                                         |
| **inputStyleRoot**           | SxProps&lt;\{\}&gt;                     | \{ \}                     | inputStyleRoot : \{\}                             |
| **startViews**               | ["year", "month", "day"\]               | ["year", "month", "day"\] | ["year", "month"day"\]                            |
| **endViews**                 | ["year","day"\]                         | ['year', 'day']           | ["year","day"\]                                   |
| **selectedDateColor**        | string                                  | "\#000"                   | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)) |
| **selectedRangeBgColor**     | string                                  | "\#B2ADEB"                | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)) |
| **selectedHoverBgColor**     | string                                  | "\#EFEEFB"                | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)) |
| **selectedHoverTextColor**   | string                                  | "\#665CD7"                | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)) |
| **cancelButtonLabel**        | string                                  | "cancel"                  | cancel                                            |
| **submitButtonLabel**        | string                                  | "Submit"                  | Submit                                            |
| **bottomButtonStyle**        | SxProps&lt;\{\}&gt;                     | \{ \}                     | bottomButtonStyle : \{\}                          |
| **buttonFontSize**           | number                                  | 14                        |
| **buttonLabelColor**         | string                                  | "\#665CD7"                | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)) |
| **addMoreButtons**           | [{label:name,handleFunction:\(\)=>{}]   | \[\]                      | []                                                |
| **startCalendarMaxHeight**   | number                                  | \-                        | Set number                                        |
| **startCalendarMinHeight**   | number                                  | \-                        | Set number                                        |
| **endCalendarMaxHeight**     | number                                  | \-                        | Set number                                        |
| **endCalendarMinHeight**     | number                                  | \-                        | Set number                                        |
| **startCalendarHeight**      | number                                  | \-                        | Set number                                        |
| **endCalendarHeight**        | number                                  | \-                        | Set number                                        |
| **maxDateEnd**               | YYYY\-MM\-DDDayjs                       | \-                        | Set object                                        |
| **minDateEnd**               | YYYY\-MM\-DDDayjs                       | \-                        | Set object                                        |
| **minDateStart**             | YYYY\-MM\-DDDayjs                       | \-                        | Set object                                        |
| **maxDateStart**             | YYYY\-MM\-DDDayjs                       | \-                        | Set object                                        |
| **calenderPopoverStyle**     | SxProps&lt;\{\}&gt;                     | \{ \}                     | calenderPopoverStyle : \{\}                       |
| **endCalendarStyle**         | SxProps&lt;\{\}&gt;                     | \{ \}                     | endCalendarStyle : \{\}                           |
| **startCalendarStyle**       | SxProps&lt;\{\}&gt;                     | \{ \}                     | startCalendarStyle : \{\}                         |
| **leftInputCalendarIcon**    | ReactNode                               | )                         | ""                                                |
| **rightInputCalendarIcon**   | ReactNode                               | ""                        | ""                                                |
| **handleEndDateChangeFun**   | \(\)=&gt;\{\}                           | \(\) =&gt; false          | \-                                                |
| **handleStartDateChangeFun** | \(\)=&gt;\{\}                           | \(\) =&gt; false          | \-                                                |
| **onMonthChangeStartFun**    | \(\)=&gt;\{\}                           | \(\) =&gt; false          | \-                                                |
| **onMonthChangeEndFun**      | \(\)=&gt;\{\}                           | \(\) =&gt; false          | \-                                                |
| **onYearChangeStartFun**     | \(\)=&gt;\{\}                           | \(\) =&gt; false          | \-                                                |
| **onYearChangeEndFun**       | \(\)=&gt;\{\}                           | \(\) =&gt; false          | \-                                                |
| **handleSubmitCalendarFun**  | \(\)=&gt;\{\}                           | \(\) =&gt; false          | \-                                                |
| **className**                | string                                  | \-                        | Set string                                        |
| **sx**                       | SxProps&lt;Theme&gt;                    | {}                        | Set object                                        |
| **openTo**                   | day `or` month `or` year                | day                       | string                                            |