@datepicker-react/hooks
Getting Started
Install
yarn add @datepicker-react/hooks
Include hooks
import {useDatepicker, useMonth, useDay} from '@datepicker-react/hooks'
Example (codesandbox)
Articles
useDatepicker
The useDatepicker hook returns functions like goToPreviousMonths, goToNextMonths, etc., which
allows us to control the datepicker.
useDatepickerProps
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.
unavailableDates?: Date[]
Receives unavailable dates in array.
useDatepickerResult
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.
useMonth
The useMonth returns all days of the month, weekday labels and month label.
useMonthProps
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.
useMonthResult
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.
useDay
useDayProps
date: Date
Day date
dayRef: React.RefObject<HTMLButtonElement>
Ref of a day button.
focusedDate: Date | null
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
useDayResult
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.
Who's using
LifeOnScreen
@datepicker-react/styled
License
Licensed under the MIT License, Copyright © 2019-present Miha Sedej.
See LICENSE for more information.