A Simple Date Paint Picker for React

react-date-painter

A Simple Date Paint Picker for React.

Installation

yarn add react-date-painter
or
npm install react-date-painter

Usage

// When using DatePainter
import { DatePainter } from 'react-date-painter'

<DatePainter selectedDates={[]} />

// When using DatePainterPicker
import { DatePainter, DatePainterPicker } from 'react-date-painter'

<DatePainterPicker>
  <DatePainter selectedDates={[]} />
</DatePainterPicker>

Example

import { useState, useCallback } from 'react'
import { DatePainter } from 'react-date-painter'

const App = () => {
  const [state, setState] = useState([])

  return (
    <DatePainter
      selectedDates={state}
      handleSelectDates={useCallback((dates: Date[]) => {
        setSelectedDates(dates)
      }, [])}
    />
  )
}

Props

Name	Required	Type	Default	Description
format	-	Literal	MMMM YYYY	Calendar Header format. You can select day.js format.
selectedDates	Yes	Array	-	The day you choose. Type is a Date Array.
uniqueHoliday	-	Array	[]	Your own holiday. Formats that can be added are 'YYYY-MM-DD'.
targetId	-	string	-	Only when using DatePainterPicker. Position to display datepicker. If there is no targetId, start from document.body.
handleSelectDates	-	(date: Date[]) => void	-	This function fired when date is selected or reselected.

License

react-date-painter is available under the MIT License.