npm package: @licuido-ui/ui_date-range-selector
Description: The `DateRangeSelector` component is a customizable modal dialog box that can be used to display information, messages, or custom content with optional title, body, and footer components.
Latest version: 3.0.11

# DateRangeSelector

The `DateRangeSelector` component is a customizable modal dialog box that can be used to display information, messages, or custom content with optional title, body, and footer components.

### Author

- @author Thilagaraj <thilag@crayond.co>

### Npm Package Extension

- react-datepicker

## Link

[Story Book Link DateRangeSelector](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-selector"
```

## Import component

```jsx
import { DateRangeSelector } from '@licuido-ui/ui_date-range-selector';
```

## Usage

```jsx
      <DateRangeSelector
      selectedBackgroundColor='red'
      selectedColor='blue'
      startRangeBackgroundColor='red'
      endRangeBackgroundColor='red'
      rangeSelectedBackgroundColor='green'
      rangeSelectedColor='white'
      selectsRange={true as unknown as undefined}
      onSubmit={(e) => console.log(e)}
      secondButton
      firstButton
    />
```

## Image

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

**`Single Select`**  
 You don't props Allow an selectRange its a boolean type if you use a false it cannot show of select range

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

**`Multi Select`**  
 You must allow a props of selectRange its shown a dummy data

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

## Sample Code

```jsx
    <DateRangeSelector
    selectedBackgroundColor
    selectedColor
    rangeSelectedBackgroundColor
    rangeSelectedColor
    startRangeBackgroundColor
    endRangeBackgroundColor
    selectsRange
    buttonRootStyle
    doneButtonStyle
    subRootStyle
    cancelButtonStyle
    cancelVariant = 'outlined'
    doneVariant = 'contained'
    firstButtonName = 'Cancel'
    secondButtonName = 'Done'
    firstButton
    secondButton
    maxDate
    minDate
    initialSelectedBgcolor
    initialMonthDropdownHover
    initialSelectedMonthDropdownBgcolor
    className = ''
    sx = {}
    />
```

## DateRangeSelector Component

### Props

| **Prop**                                             | **Type**                              | **Description**                                                                                                                              | **Default**                                                            |
| ---------------------------------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| **`selectedBackgroundColor`**                        | `string`                              | Background color for selected dates                                                                                                          | `'#0c356a'`                                                            |
| **`selectedColor`**                                  | `string`                              | Text color for selected dates                                                                                                                | `'#fff'`                                                               |
| **`rangeSelectedBackgroundColor`**                   | `string`                              | Background color for dates within a range                                                                                                    | `'#d7e3ff'`                                                            |
| **`rangeSelectedColor`**                             | `string`                              | Text color for dates within a range                                                                                                          | `'#1D192B'`                                                            |
| **`selected is a default state using a new Date()`** | `Date`                                | handle a date to set a default value in dateState this is an date formate eg:: Wed Mar 25 2015 05:30:00 GMT+0530 (India Standard Time) range | `'#1D192B'`                                                            |
| **`startRangeBackgroundColor`**                      | `string`                              | Background color for the start of a date range                                                                                               | `'#0c356a'`                                                            |
| **`endRangeBackgroundColor`**                        | `string`                              | Background color for the end of a date range                                                                                                 | `'#0c356a'`                                                            |
| **`buttonRootStyle`**                                | `object` (SxProps)                    | Styles for the root container of buttons                                                                                                     | `{ display: 'flex', gap: 1, justifyContent: 'end', pr: 2.5, pb: 1.5 }` |
| **`yearReverse`**                                    | `boolean`                             | for showing year in ascending order                                                                                                          | false                                                                  |
| **`doneButtonStyle`**                                | `object` (SxProps)                    | Styles for the "Done" button                                                                                                                 | See code below                                                         |
| **`cancelButtonStyle`**                              | `object` (SxProps)                    | Styles for the "Cancel" button                                                                                                               | See code below                                                         |
| **`subRootStyle`**                                   | `object` (SxProps)                    | Styles for the sub-root container                                                                                                            | `{ width: '332px' }`                                                   |
| **`cancelVariant`**                                  | `'outlined' \| 'contained' \| 'text'` | Variant for the "Cancel" button                                                                                                              | `'outlined'`                                                           |
| **`doneVariant`**                                    | `'outlined' \| 'contained' \| 'text'` | Variant for the "Done" button                                                                                                                | `'contained'`                                                          |
| **`firstButtonName`**                                | `string`                              | Label for the "Cancel" button                                                                                                                | `'Cancel'`                                                             |
| **`secondButtonName`**                               | `string`                              | Label for the "Done" button                                                                                                                  | `'Done'`                                                               |
| **`firstButton`**                                    | `boolean`                             | Display the "Cancel" button                                                                                                                  | `true`                                                                 |
| **`secondButton`**                                   | `boolean`                             | Display the "Done" button                                                                                                                    | `true`                                                                 |
| **`maxDate`**                                        | `string`                              | hide a future date in Date range picker                                                                                                      |
| **`minDate`**                                        | `string`                              | hide a previous date in Date range picker                                                                                                    |
| **`initialSelectedBgcolor`**                         | `string`                              | Background color for the start of a date range                                                                                               | `'#0c356a'`                                                            |
| **`initialMonthDropdownHover`**                      | `string`                              | Background color for the dropDown of a Month date range                                                                                      | `'#D7E3FF'`                                                            |
| **`initialSelectedMonthDropdownBgcolor`**            | `string`                              | Background color for the dropDown of a Month range                                                                                           | `'#D7E3FF'`                                                            |
| **`hidePastYear`**                                   | `boolean`                             | Hide past year                                                                                                                               | `false`                                                                |
| **`hideFutureYear`**                                 | `boolean`                             | Hide future year                                                                                                                             | `false`                                                                |

### Default Props

```javascript
{
  selectedBackgroundColor: '#0c356a',
  selectedColor: '#fff',
  rangeSelectedBackgroundColor: '#d7e3ff',
  rangeSelectedColor: '#1D192B',
  startRangeBackgroundColor: '#0c356a',
  endRangeBackgroundColor: '#0c356a',
  buttonRootStyle: { display: 'flex', gap: 1, justifyContent: 'end', pr: 2.5, pb: 1.5 },
  doneButtonStyle: {
    boxShadow: 'none',
    p: '6px 16px',
    bgcolor: '#0C356A',
    fontSize: '14px',
    '&:hover': {
      boxShadow: 'none',
      bgcolor: '#0C356A',
      opacity: '1.1',
    },
  },
  cancelButtonStyle: {
    '&:hover': {
      boxShadow: 'none',
      color: '#0C356A',
      opacity: '1.1',
      borderColor: '#0C356A',
    },
    color: '#0C356A',
    p: '6px 12px',
    border: '1px solid',
    borderColor: '#0C356A',
    borderRadius: '8px',
    fontSize: '14px',
    boxShadow: 'none',
  },
  subRootStyle: {
    width: '332px',
  },
  firstButtonName: 'Cancel',
  secondButtonName: 'Done',
  yearReverse: {false}
}

```