Date picker and Date range picker for React js

Live Demo

Installation

npm i awesome-date-picker --save

How to use

Date picker

Props

onDateSelect

Callback function on date select

children

The icon need to pass for calender render

prePos

This is optional prop this will be usefull if you need to pre define where to render the date picker.

<AppDatePicker
  onDateSelect={(date:Date) => {}}
  children={<Icon />}
  prePos={{x?: number, y?: number}}
/>

Date range picker

onRangeSelect

Callback function on date select

children

The icon need to pass for calander render

prePos

This is optional prop this will be usefull if you need to pre define where to render the date range picker.

const onRangeSelect = (startDate: Date, endDate: Date, key: number) => {
  console.log('startDate', startDate)
  console.log('endDate', endDate)
};

<AppDateRangePicker
  id=""
  children={<Icon />}
  onRangeSelect={onRangeSelect}
  prePos={{x?: number, y?: number}}
/>

Contact me if you stuck anywhere [email protected] ✨