@licuido-ui/ui_date-range-picker v0.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

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_date-range-picker

Import component

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

Usage

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

Image

Sample Code

<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