use-date-input - Build Your Own Date Picker

Day

The Day components renders a calendar day, based on the current Calendar state.

In the default implementation, Week is the parent of Day.

Example

() => {
  function DayExample() {
    const { createDate, toFormattedDate } = useDateAPI()
    const day = createDate()
    return <Day day={day} toFormattedDate={toFormattedDate} />
  }
  return (
    <CalendarProvider adapter={dateAdapter}>
      <DayExample />
    </CalendarProvider>
  )
}

() => {
  function DayExample() {
    const { createDate, toFormattedDate } = useDateAPI()
    const day = createDate()
    return <Day day={day} toFormattedDate={toFormattedDate} />
  }
  return (
    <CalendarProvider adapter={dateAdapter}>
      <DayExample />
    </CalendarProvider>
  )
}

Props

Prop Name	Type	Is Required	Description
activeCursor	`string`	optional	Active cursor type, based on last user selection, defines any visible range
className	`string`	optional	Class name of root element
day	`object`	optional	Day object
disabled	`bool`	optional	Flag indicating whether the day is disabled
isEndDate	`bool`	optional	Flag indicating whether the date is the end date
isFocused	`bool`	optional	Flag indicating whether the day is focused
isKeyboardCursor	`bool`	optional	Flag indicating whether the day is the keyboard cursor
isMidRange	`bool`	optional	Flag indicating whether the date is between start and end of range
isMouseCursor	`bool`	optional	Flag indicating whether the day is the mouse cursor
isMouseCursorValid	`bool`	optional	Flag indicating whether the mouse cursor defines a valid range
isOutsideOfMonth	`bool`	optional	Is outside of the current month that is being rendered
isStartDate	`bool`	optional	Flag indicating whether the date is the start date
isToday	`bool`	optional	Flag indicating whether the date is today
onMouseOutDate	`func`	optional	Callback called when mouse leaves a Day
onMouseOverDate	`func`	optional	Callback called when mouse is over a Day
onSelectDate	`func`	optional	Callback called on date select
tabIndex	`number`	optional	The tab index
toFormattedDate	`func`	required	Callback to format a date, used by aria labels

Importing

It can be imported as either the base component

import { Day } from "@use-date-input/core";

or as an overridable component that can be replaced through the components prop in CalendarProvider.
Refer to How to replace UI components.

import { CustomisableDay } from "@use-date-input/core";

If providing your own component, it can be useful to import the base component and use it within your composition.

Day

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Example

Props

Importing

Example