@datepicker-react/hooks



Getting Started

$3

``sh
yarn add @datepicker-react/hooks
`

$3

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

$3

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.

$3

#### 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.

$3

Receives unavailable dates in array.

$3

#### 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.

$3

#### 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.

$3

#### 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

$3

#### date: Date

Day date

#### dayRef: React.RefObject

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

$3

#### 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.