@licuido-ui/ui_date-range-selector NPM

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

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

alt text

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

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

alt text

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

@date-io/date-fns @emotion/react @emotion/styled @mui/material moment react react-datepicker react-dom

@licuido-ui/react

3.0.11

8 months ago