react-date-painter

A Simple Date Paint Picker for React.

View Demo View Github

Installation

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

Usage

// When using DatePainter
import { DatePainter } from 'react-date-painter'
React TSX
<DatePainter selectedDates={[]} />
React TSX
// When using DatePainterPicker
import { DatePainter, DatePainterPicker } from 'react-date-painter'
React TSX
<DatePainterPicker>
  <DatePainter selectedDates={[]} />
</DatePainterPicker>
React TSX

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)
      }, [])}
    />
  )
}
React TSX

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.