0.1.3 • Published 4 years ago
react-date-painter v0.1.3
Date Paint Picker for React.
Demo - chromatic
Installation
yarn add react-date-painter
or
npm install react-date-painterUsage
// 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.