react-awesome-datepickers v1.0.2

React-awesome-datepickers

A simple, lightweight datepicker library for your awesome react app.

Usage:

npm install react-awesome-datepickers

• Basic

  import { useState } from 'react';
  import { MaterialPicker } from 'react-awesome-datepickers';

const Picker = () => { const date, setDate = useState(initialSelectedDate => can be undefined, null, or an actual date);

return <MaterialPicker onDateSelect={setDate} />

}

- ### RangePicker

import { useState } from 'react'; import { MaterialPicker, RangeDates } from 'react-awesome-datepickers';

// RangeDates => { startDate: null | Date | undefined endDate: null | Date | undefined }

const Picker = () => { const range, setRange = useState({});

return <MaterialPicker range onDateRangeChange={setRange} dateRange={range} />

}

## API
`nextButton?: ReactElement => element to provide instead of the default provided svg`

----
`prevButton?: ReactElement => element to provide instead of the default provided svg`

----
`range?: boolean => picker is of type range`

----
`hideNavigationButtons?: boolean`

----
`nextButtonWrapperClassName?: string => buttons are wrapped on a div wrapper with a onClick callback`

----
`prevButtonWrapperClassName?: string => buttons are wrapped on a div wrapper with a onClick callback`

----
`initialSelectedDate?: Date | null => initial selected date`

----
`initialMonthPosition?: Date => initial month position on the datepicker`

----
`dateRange?: RangeDates => if picker type range => pass this from state to keep the picker updated`

----
`dayClassName?: string => base day className`

----
`selectedClassName?: string => className to provide on the selected date, with the base class`

----
`disabledClassName?: string => className to provide on the disabled date, with the base class`

----
`notThisMonthClassName?: string => className to provide on the dates present on the month, but of the prev/next month, with the base class`

----
`inRangeClassName?: string => className to provide on the dates in between the startDate and endDate when picker typeof `range`, with the base class`

----
`inRangeHoverClassName?: string => className to provide on the dates in between the startDate and endDate when picker typeof `range`, when the endDate is not selected with the base class`

----
`lastInRangeClassName?: string => className to provide on the selected endDate, on input type range date, with the base class`

----
`firstInRangeClassName?: string => className to provide on the selected startDate, on input type range date, with the base class`

----
`wrapperClassName?: string => className to provide on the wrapper element, with the base class`

----
`startFrom?: Date => if passed the dates before this date will be disabled`

----
`endFrom?: Date => if passed the dates after this date will be disabled`

----
`showNotThisMonthDays?: boolean => show dates which are not of this month`

----
`selectedDate: Date | null | undefined`

----
`range?: boolean`

----
`onDateSelect?: (date: Date) => void => callback to update the state of the parent component`

----
`changeMonthIfDateOutside?: boolean => if you click on the dates from the next month, present in the current month shown, should it move to the next date`

----
`onPositionChanged?: (position: Date) => void => used if you want to keep track of the current position shown on the screen`

----
`onDateRangeChange?: (range: RangeDates) => void => called when picker typeof range and endDate or startDate is selected`

----
`dateRange: RangeDates => passed from parent to update the internal state when picker typeof range`

## TODO
- add pickers from other design systems
- performance improvements