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 [email protected]

Npm Package Extension

• react-datepicker

Link

Story Book Link DateRangeSelector

PlayGround

Try it have a fun codeBox

Installation

npm i "@licuido-ui/ui_date-range-selector"

Import component

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

Usage

      <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

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

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

Sample Code

    <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

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