@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)

Table of Contents

• useDatepickerProps
  • onDatesChange: (data: OnDatesChangeProps) => void
  • minBookingDate: Date | undefined
  • maxBookingDate: Date | undefined
  • startDate: Date | null
  • endDate: Date | null
  • focusedInput: 'startDate' | 'endDate' | null
  • numberOfMonths: number | undefined (Default: 2)
  • minBookingDays: number | undefined (Default: 1)
  • exactMinBookingDays: boolean | undefined (Default: false)
  • firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6 (Default: 1 - Monday)
  • isDateBlocked: (date: Date) => boolean
• useDatepickerResult
  • firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6
  • activeMonths: ({year: number, month: number})[]
  • numberOfMonths: number
  • focusedDate: Date | null
  • isDateSelected: (date: Date) => boolean
  • isDateHovered: (date: Date) => boolean
  • isDateBlocked: (date: Date) => boolean
  • isDateFocused: (date: Date) => boolean
  • isFirstOrLastSelectedDate: (date: Date) => boolean
  • onResetDates: () => void
  • onDateHover: (date: Date) => void
  • onDateSelect: (date: Date) => void
  • onDateFocus: (date: Date) => void
  • goToNextMonths: () => void
  • goToPreviousMonths: () => void
• useMonth
  • useMonthProps
    • Year
    • Month
    • firstDayOfWeek: number | undefined (Default: 1)
    • dayLabelFormat: (date: Date) => string | undefined (Default: (date: Date) => format(date, 'MMMM YYYY'))
    • weekdayLabelFormat: (date: Date) => string | undefined (Default: (date: Date) => format(date, 'dd'))
    • monthLabelFormat: (date: Date) => string | undefined (Default: (date: Date) => format(date, 'dd'))
  • useMonthResult
    • days: ({date: Date, dayLabel: string})[]
    • weekdayLabels: (string)[]
    • monthLabel: string
• useDay
  • useDayProps
    • date: Date
    • dayRef: React.RefObject
    • 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
    • onKeyDown: (e: KeyboardEvent) => void
    • onClick: () => void
    • onMouseEnter: () => void
    • disabledDate: boolean
    • isWithinHoverRange: boolean
    • isSelectedStartOrEnd: boolean
    • isSelected: boolean
• Who's using
• License

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.

isDateBlocked: (date: Date) => boolean

If isDateBlocked returns true, then the date is blocked.

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.

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.

goToNextMonths: () => void

Updates activeMonths (next months) in accordance with the numberOfMonths prop.

goToPreviousMonths: () => void

Updates activeMonths (previous months) in accordance with the numberOfMonths prop.

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, 'dd'))

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.

Changelog

1.3.0 (2019-06-11)

Bug Fixes

• snapshot: update snapshots (a2efb15)
• test: test (7b7e355)

Features

• animations: add annimations to datepicker (facdad9)
• single datepicker: add single datepicker (57e9219)