Skip to content

911mateo911/react-awesome-datepickers

Repository files navigation

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<Date>(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<RangeDates>({});
    
    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