Newline Proliferating Maniac

    @datepicker-react/hooks
    TypeScript icon, indicating that this package has built-in type declarations

    2.8.4 • Public • Published

    @datepicker-react/hooks

    Gzip size Coverage Status Build Status Netlify Status

    NPM

    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.


    Buy me a coffee

    Install

    npm i @datepicker-react/hooks

    DownloadsWeekly Downloads

    24,119

    Version

    2.8.4

    License

    MIT

    Unpacked Size

    187 kB

    Total Files

    18

    Last publish

    Collaborators

    • tomgreenwood1