React Hook Date Picker

A set of hooks that allow you to build fully customisable single and range date pickers

Installation

npm install react-hook-datepicker --save

This package depends on react and date-fn. Please make sure you have both installed as well.

useDatePicker Usage

Try in codesandbox

const [selectedDate, setSelectedDate] = React.useState<Date | undefined>()
const [isOpen, setIsOpen] = React.useState<boolean>(false)

const {
  calendar,
  getDateProps,
  getPrevMonthButtonProps,
  getNextMonthButtonProps,
} = useDatePicker({ value: selectedDate, isOpen, onChange: setSelectedDate })

Options

| Name | Type | Description | | ------------ | ---------------------------------- | ------------------------------------------------------------ | | value | Date | undefined | The current selected date. This can be undefined initially | | isOpen | boolean | Should be truthy when the calendar is open | | onChange | function | Called when the user selects a date | | disabledWhen | function | Used to disable dates. It expects a boolean to be returned |

Returned Props

| Name | Type | Description | | ------------------------ | ----------- | --------------------------------------------------------------------------------- | | visibleDate | Date | The date that is currently visible | | calendar | Calendar | An object that allows you to construct the calendar view | | getDateProps | function | Returns props that should be applied to each date element you render | | getPrevMonthButtonProps | function | Returns props that should be applied to the button for viewing the previous month | | getNextMonthButtonProps | function | Returns props that should be applied to the button for viewing the next month |

Calendar Type

| Name | Type | Description | | --------------- | -------- | ------------------------------------------------------------------- | | dates | Date[] | An array of dates in the current month | | month | string | The current month | | year | number | The current year | | firstDayOfMonth | number | The first weekday of the year as an integer. Sunday = 1, Monday = 2 |

useDateRangePicker Usage

Try in codesandbox

type Range = { start: Date | undefined; end: Date | undefined; }

const [selectedRange, setSelectedRange] = React.useState<Range>({ start: undefined, end: undefined })
const [isOpen, setIsOpen] = React.useState<boolean>(false)

const {
  calendars,
  getDateProps,
  getPrevMonthButtonProps,
  getNextMonthButtonProps,
} = useDateRangePicker({ value: selectedRange, isOpen, onChange: setSelectedRange })

Options

| Name | Type | Description | | ------------ | ---------------------------------------- | ------------------------------------------------------------------ | | value | DateRange | undefined | The current selected range. This can be undefined initially | | isOpen | boolean | Should be truthy when the calendar is open | | onChange | function | Called when the user selects a date | | disabledWhen | function | Used to disable before a date. It expects a boolean to be returned |

Returned Props

| Name | Type | Description | | ------------------------- | ------------ | --------------------------------------------------------------------------------- | | visibleRange | DateRange | The date range that is currently visible | | calendars | Calendar[] | An object that allows you to construct the calendar view | | getDateProps | function | Returns props that should be applied to each date element you render | | getPrevMonthButtonProps | function | Returns props that should be applied to the button for viewing the previous month | | getNextMonthButtonProps | function | Returns props that should be applied to the button for viewing the next month |

Range Type

| Name | Type | Description | | ----- | ---------------------------------- | ----------------------------------------------------- | | start | Date | undefined | JS Date format that represents the start of the range | | end | Date | undefined | JS Date format that represents the end of the range |

Calendar Type

| Name | Type | Description | | --------------- | --------------------------------- | ----------------------------------------------------------------------- | | view | 'start' | 'end' | A string to identify start of end calendar | | dates | Date[] | An array of dates in the current month | | month | string | The current month | | year | number | The current year | | firstDayOfMonth | number | The first weekday of the year as an integer. Sunday = 1, Monday = 2 etc |