@datepicker-react/hooks

@datepicker-react/hooks

Getting Started

Install

yarn add @datepicker-react/hooks

Include hooks

import {useDatepicker, useMonth, useDay} from '@datepicker-react/hooks'

Example (codesandbox)

Articles

• Create a custom React date picker in 10 minutes

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.