React hooks for datepicker.
npm install @datepicker-react/hooks




``sh`
yarn add @datepicker-react/hooks
`js`
import {useDatepicker, useMonth, useDay} from '@datepicker-react/hooks'
- Create a custom React date picker in 10 minutes
The useDatepicker hook returns functions like goToPreviousMonths, goToNextMonths, etc., which
allows us to control the datepicker.
#### onDatesChange: (data: OnDatesChangeProps) => void
A callback is triggered when the date is selected (onDaySelect).
#### minBookingDate: Date | undefined
If prop is set, then all dates before minBookingDate are disabled.
#### maxBookingDate: Date | undefined
If prop is set, then all dates after maxBookingDate are disabled.
#### startDate: Date | null
Current start date.
#### endDate: Date | null
Current end date.
#### focusedInput: 'startDate' | 'endDate' | null
Current focused date.
#### numberOfMonths: number | undefined (Default: 2)
Number of visible months.
#### minBookingDays: number | undefined (Default: 1)
Minimum allowed date range in days.
#### exactMinBookingDays: boolean | undefined (Default: false)
If exactMinBookingDays is true, then the range of dates is always the same as minBookingDays.
#### firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6 (Default: 1 - Monday)
First day of the week.
#### initialVisibleMonth? Date
Initial visible month
#### isDateBlocked: (date: Date) => boolean
If isDateBlocked returns true, then the date is blocked.
#### changeActiveMonthOnSelect?: boolean
If this is false, the active month panel will not change when selecting the start date.
Receives unavailable dates in array.
#### firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6
First day of the week.
#### activeMonths: ({year: number, month: number})[]
Array of visible months. Each month is an object that contains year and month.
#### numberOfMonths: number
Number of visible months.
#### focusedDate: Date | null
Focused date.
#### isDateSelected: (date: Date) => boolean
Returns true if a date is selected or within the selected range, otherwise false.
#### isDateHovered: (date: Date) => boolean
Returns true if a date is hovered, otherwise false.
#### isDateBlocked: (date: Date) => boolean
Returns true if a date is blocked, otherwise false.
#### isDateFocused: (date: Date) => boolean
Returns true if a date is focused, otherwise false.
#### isFirstOrLastSelectedDate: (date: Date) => boolean
Returns true if a date is the first or the last date in the selected range, otherwise false.
#### isStartDate: (date: Date) => boolean
Returns true if a date is the first or the last date in the selected range, otherwise false.
#### isEndDate: (date: Date) => boolean
Returns true if a date is the first or the last date in the selected range, otherwise false.
#### onResetDates: () => void
Reset start and end date.
#### onDateHover: (date: Date) => void
Set internal hovered state.
#### onDateSelect: (date: Date) => void
Select a date. Which date is selected, depends on focusedInput.
#### onDateFocus: (date: Date) => void
Set focusedDate.
#### goToDate: (date: Date) => void
Updates activeMonths to specific date.
#### goToNextMonths: () => void
Updates activeMonths (next months) in accordance with the numberOfMonths prop.
#### goToNextMonthsByOneMonth: () => void
Updates activeMonths (next months) by one month.
#### goToPreviousMonths: () => void
Updates activeMonths (previous months) in accordance with the numberOfMonths prop.
#### goToPreviousMonthsByOneMonth: () => void
Updates activeMonths (previous months) by one month.
#### goToPreviousYear: (numYears: number = 1) => void
Go to the previous year by default.
#### goToNextYear: (numYears: number = 1) => void
Go to the next year by default.
The useMonth returns all days of the month, weekday labels and month label.
#### year
Year
#### month
Month
#### firstDayOfWeek: number | undefined (Default: 1)
First day of the week.
#### dayLabelFormat: (date: Date) => string | undefined (Default: (date: Date) => format(date, 'MMMM yyyy'))
Formats day label.
#### weekdayLabelFormat: (date: Date) => string | undefined (Default: (date: Date) => format(date, 'eeeeee'))
Formats weekday label.
#### monthLabelFormat: (date: Date) => string | undefined (Default: (date: Date) => format(date, 'dd'))
Formats month label.
#### days: ({date: Date, dayLabel: string})[]
Array of day objects. Each object contains date and dayLabel.
#### weekdayLabels: (string)[]
Array of weekday labels.
#### monthLabel: string
Month label.
#### date: Date
Day date
#### dayRef: React.RefObject
Ref of a day button.
#### isDateFocused: (date: Date) => boolean
#### isDateSelected: (date: Date) => boolean
#### isDateHovered: (date: Date) => boolean
#### isDateBlocked: (date: Date) => boolean
#### isFirstOrLastSelectedDate: (date: Date) => boolean
#### onDateFocus: (date: Date) => void
#### onDateSelect: (date: Date) => void
#### onDateHover: (date: Date) => void
#### tabIndex: 0 | -1
tabIndex that you pass to the day button tabIndex.
#### onKeyDown: (e: KeyboardEvent) => void
onKeyDown callback that you can pass to the day button onKeyDown.
#### onClick: () => void
onClick callback that you pass to the day button onClick.
#### onMouseEnter: () => void
onMouseEnter callback that you pass to the day button onMouseEnter.
#### disabledDate: boolean
If true, then the date is disabled.
#### isWithinHoverRange: boolean
If true, then the date is within hover range.
#### isSelectedStartOrEnd: boolean
If true, then the date is the first or the last selected date.
#### isSelected: boolean
If true`, then the date is selected.
LifeOnScreen
@datepicker-react/styled
Licensed under the MIT License, Copyright © 2019-present Miha Sedej.
See LICENSE for more information.
