Creating a DayInput Component with React and TypeScript for Date Selection

🐙 GitHub | 🎮 Demo

Creating a DayInput Component with React and TypeScript

In this article, we will create a component for selecting a date using React and TypeScript. We'll call it DayInput to be more specific. You can find both the demo and the source code in RadzionKit.

Initial Purpose

The initial reason for making this component was to add support for age-based goals in the productivity app Increaser. Therefore, we'll use a date of birth form as an example in this article.

import { HStack } from "@lib/ui/layout/Stack"
import { Button } from "@lib/ui/buttons/Button"
import styled from "styled-components"
import { InputContainer } from "@lib/ui/inputs/InputContainer"
import { DayInput } from "@lib/ui/time/day/DayInput"
import { stringToDay, dayToString, Day } from "@lib/utils/time/Day"
import { FinishableComponentProps } from "@lib/ui/props"
import { useState } from "react"
import { LabelText } from "@lib/ui/inputs/LabelText"
import { useUpdateUserMutation } from "../../user/mutations/useUpdateUserMutation"
import { getFormProps } from "@lib/ui/form/utils/getFormProps"
import { useAssertUserState } from "../../user/UserStateContext"
import { Panel } from "@lib/ui/panel/Panel"
import { useDobBoundaries } from "./useDobBoundaries"
import { getDefaultDob } from "./getDefaultDob"

const Container = styled(HStack)`
  width: 100%;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
`

export const SetDobForm = ({ onFinish }: FinishableComponentProps) => {
  const { dob } = useAssertUserState()
  const { mutate: updateUser } = useUpdateUserMutation()
  const [value, setValue] = useState<Day>(() => {
    if (dob) {
      return stringToDay(dob)
    }

    return getDefaultDob()
  })

  const [min, max] = useDobBoundaries()

  return (
    <InputContainer as="div" style={{ gap: 8 }}>
      <LabelText>Your date of birth</LabelText>
      <Panel kind="secondary">
        <Container
          as="form"
          {...getFormProps({
            onClose: onFinish,
            onSubmit: () => {
              updateUser({ dob: dayToString(value) })
              onFinish()
            },
          })}
        >
          <DayInput min={min} max={max} value={value} onChange={setValue} />
          <Button>Submit</Button>
        </Container>
      </Panel>
    </InputContainer>
  )
}

Component Props

Our DayInput component receives four props:

• value: The selected date.
• onChange: A function to call when the date changes.
• min: The minimum date.
• max: The maximum date.

import { useMemo } from "react"
import { InputProps } from "../../props"
import { ExpandableSelector } from "../../select/ExpandableSelector"
import { Day, fromDay, toDay } from "@lib/utils/time/Day"
import { monthNames } from "@lib/utils/time/Month"
import {
  dayInputParts,
  fromDayInputParts,
  toDayInputParts,
} from "./DayInputParts"
import styled from "styled-components"
import { getDayInputPartInterval } from "./getDayInputPartInterval"
import { match } from "@lib/utils/match"
import { enforceRange } from "@lib/utils/enforceRange"
import { intervalRange } from "@lib/utils/interval/intervalRange"

type DayInputProps = InputProps<Day> & {
  min: Day
  max: Day
}

const Container = styled.div`
  display: grid;
  grid-template-columns: 68px 120px 80px;
  gap: 8px;
`

export const DayInput = ({ value, onChange, min, max }: DayInputProps) => {
  const parts = useMemo(() => toDayInputParts(fromDay(value)), [value])

  return (
    <Container>
      {dayInputParts.map((part) => {
        const interval = getDayInputPartInterval({
          min,
          max,
          part,
          value: parts,
        })

        return (
          <ExpandableSelector
            key={part}
            value={parts[part]}
            onChange={(value) => {
              const newParts = { ...parts, [part]: value }

              const lowerParts = dayInputParts.slice(
                0,
                dayInputParts.indexOf(part)
              )
              lowerParts.toReversed().forEach((part) => {
                const { start, end } = getDayInputPartInterval({
                  min,
                  max,
                  part,
                  value: newParts,
                })
                newParts[part] = enforceRange(newParts[part], start, end)
              })

              const newValue = toDay(fromDayInputParts(newParts))

              onChange(newValue)
            }}
            options={intervalRange(interval)}
            renderOption={(option) =>
              match(part, {
                day: () => option.toString(),
                month: () => monthNames[option - 1],
                year: () => option.toString(),
              })
            }
            getOptionKey={(option) => option.toString()}
          />
        )
      })}
    </Container>
  )
}

Using Day as the Type

As you can see, we use Day as the type for the value, which is an object with year and dayIndex fields. This might seem a bit unusual, but it makes sense when you consider representing a day. These two fields are sufficient to represent a day, and including the month doesn't add significant value.

import { haveEqualFields } from "../record/haveEqualFields"
import { convertDuration } from "./convertDuration"
import { addDays, format, startOfYear } from "date-fns"
import { inTimeZone } from "./inTimeZone"

export type Day = {
  year: number
  dayIndex: number
}

export const toDay = (timestamp: number): Day => {
  const date = new Date(timestamp)
  const dateOffset = date.getTimezoneOffset()
  const yearStartedAt = inTimeZone(startOfYear(timestamp).getTime(), dateOffset)
  const diff = timestamp - yearStartedAt
  const diffInDays = diff / convertDuration(1, "d", "ms")

  const day = {
    year: new Date(timestamp).getFullYear(),
    dayIndex: Math.floor(diffInDays),
  }

  return day
}

export const dayToString = ({ year, dayIndex }: Day): string =>
  [dayIndex, year].join("-")

export const stringToDay = (str: string): Day => {
  const [dayIndex, year] = str.split("-").map(Number)

  return { dayIndex, year }
}

export const fromDay = ({ year, dayIndex }: Day): number => {
  const startOfYearDate = startOfYear(new Date(year, 0, 1))

  return addDays(startOfYearDate, dayIndex).getTime()
}

export const areSameDay = <T extends Day>(a: T, b: T): boolean =>
  haveEqualFields(["year", "dayIndex"], a, b)

export const formatDay = (timestamp: number) => format(timestamp, "EEEE, d MMM")

Storing and Converting Dates

We can store the date in the database as a string by using the dayToString function. Additionally, we have several helper functions to convert between Day, timestamp, and string. In the toDay function, we perform an interesting calculation to get the day index. It's important to be aware of timezone offsets, even within the same timezone. Due to daylight saving time, the offset can change depending on the date. Even if your location doesn't observe daylight saving time currently, it might have in the past, resulting in different offsets for previous dates. By using the inTimeZone function, we can ensure that the date is converted to the correct timezone before calculating the day index.

import { convertDuration } from "./convertDuration"

export const inTimeZone = (timestamp: number, targetTimeZoneOffset: number) => {
  const offsetAtTimestamp = new Date(timestamp).getTimezoneOffset()
  const offsetDiff = targetTimeZoneOffset - offsetAtTimestamp
  return timestamp + convertDuration(offsetDiff, "min", "ms")
}

Storing and Converting Dates

Our component consists of three dropdown inputs, which we place within a grid container. Each item in the grid has a custom width that matches the expected width of its respective input content. To render each dropdown, we use the ExpandableSelector component, which is covered in detail in this article.

import { FloatingOptionsContainer } from "../floating/FloatingOptionsContainer"
import { useFloatingOptions } from "../floating/useFloatingOptions"
import { UIComponentProps } from "../props"
import { OptionItem } from "./OptionItem"
import { ExpandableSelectorToggle } from "./ExpandableSelectorToggle"
import { FloatingFocusManager } from "@floating-ui/react"
import { OptionContent } from "./OptionContent"
import { OptionOutline } from "./OptionOutline"
import { ExpandableSelectorContainer } from "./ExpandableSelectorContainer"

export type ExpandableSelectorProp<T> = UIComponentProps & {
  value: T | null
  onChange: (value: T) => void
  isDisabled?: boolean
  options: readonly T[]
  getOptionKey: (option: T) => string
  renderOption: (option: T) => React.ReactNode
  openerContent?: React.ReactNode
  floatingOptionsWidthSameAsOpener?: boolean
  showToggle?: boolean
  returnFocus?: boolean
}

export function ExpandableSelector<T>({
  value,
  onChange,
  options,
  isDisabled,
  renderOption,
  getOptionKey,
  openerContent,
  floatingOptionsWidthSameAsOpener,
  showToggle = true,
  returnFocus = false,
  ...rest
}: ExpandableSelectorProp<T>) {
  const {
    getReferenceProps,
    getFloatingProps,
    getOptionProps,
    isOpen,
    setIsOpen,
    activeIndex,
    context,
  } = useFloatingOptions({
    floatingOptionsWidthSameAsOpener,
    selectedIndex: value === null ? null : options.indexOf(value),
  })

  const referenceProps = isDisabled ? {} : getReferenceProps()

  return (
    <>
      <ExpandableSelectorContainer
        isDisabled={isDisabled}
        isActive={isOpen}
        {...referenceProps}
        {...rest}
      >
        <OptionContent>
          {openerContent ?? renderOption(value as T)}
        </OptionContent>
        {showToggle && <ExpandableSelectorToggle isOpen={isOpen} />}
      </ExpandableSelectorContainer>
      {isOpen && !isDisabled && (
        <FloatingFocusManager context={context} modal returnFocus={returnFocus}>
          <FloatingOptionsContainer {...getFloatingProps()}>
            {options.map((option, index) => (
              <OptionItem
                key={getOptionKey(option)}
                isActive={activeIndex === index}
                {...getOptionProps({
                  index,
                  onSelect: () => {
                    onChange(option)
                    setIsOpen(false)
                  },
                })}
              >
                <OptionContent>{renderOption(option)}</OptionContent>
                {option === value && <OptionOutline />}
              </OptionItem>
            ))}
          </FloatingOptionsContainer>
        </FloatingFocusManager>
      )}
    </>
  )
}

Input Parts and Conversion Functions

We display the input parts in the following order: day, month, year. We extract the DayInputPart type from the dayInputParts array. Additionally, we define the DayInputParts type as a record with DayInputPart keys and number values. The toDayInputParts function converts a timestamp to a DayInputParts object, while the fromDayInputParts function converts a DayInputParts object back to a timestamp.

export const dayInputParts = ["day", "month", "year"] as const
export type DayInputPart = (typeof dayInputParts)[number]

export type DayInputParts = Record<DayInputPart, number>

export const toDayInputParts = (timestamp: number): DayInputParts => {
  const date = new Date(timestamp)
  return {
    day: date.getDate(),
    month: date.getMonth() + 1,
    year: date.getFullYear(),
  }
}

export const fromDayInputParts = ({
  day,
  month,
  year,
}: DayInputParts): number => new Date(year, month - 1, day).getTime()

Dynamic Range Calculation

The getDayInputPartInterval function is a crucial utility for dynamically determining the valid range of each part of a date input. It takes an Input object that includes minimum and maximum Day objects, the current DayInputPart, and the current date value as DayInputParts.

The function begins by converting the minimum and maximum days into their respective parts using toDayInputParts. It then checks if all higher parts (e.g., month and year for a day part, or year for a month part) are fixed, meaning they are equal for both the minimum and maximum date. If the higher parts are fixed, or if it's a year (which doesn't have higher parts), the function returns the range between the min and max parts.

For the month part, the range is adjusted based on whether the year matches the min or max year. Similarly, for the day part, it considers both the year and month to ensure the correct number of days in that month. This approach ensures that each dropdown in the date input only shows valid options, preventing users from selecting an invalid date.

import { Day, fromDay } from "@lib/utils/time/Day"
import {
  DayInputPart,
  dayInputParts,
  DayInputParts,
  toDayInputParts,
} from "./DayInputParts"
import { Interval } from "@lib/utils/interval/Interval"
import { MONTHS_IN_YEAR } from "@lib/utils/time"
import { getDaysInMonth } from "@lib/utils/time/getDaysInMonth"

type Input = {
  min: Day
  max: Day
  part: DayInputPart
  value: DayInputParts
}

export const getDayInputPartInterval = ({
  min,
  max,
  part,
  value,
}: Input): Interval => {
  const minParts = toDayInputParts(fromDay(min))
  const maxParts = toDayInputParts(fromDay(max))

  const higherParts = dayInputParts.slice(dayInputParts.indexOf(part) + 1)
  const areHigherPartsFixed = higherParts.every(
    (part) => value[part] === minParts[part] && value[part] === maxParts[part]
  )

  if (areHigherPartsFixed) {
    return {
      start: minParts[part],
      end: maxParts[part],
    }
  }

  if (part === "month") {
    if (value.year === minParts.year) {
      return {
        start: minParts[part],
        end: MONTHS_IN_YEAR,
      }
    }

    if (value.year === maxParts.year) {
      return {
        start: 1,
        end: maxParts[part],
      }
    }

    return {
      start: 1,
      end: MONTHS_IN_YEAR,
    }
  }

  if (value.year === minParts.year && value.month === minParts.month) {
    return {
      start: minParts[part],
      end: getDaysInMonth({
        year: value.year,
        monthIndex: value.month - 1,
      }),
    }
  }

  if (value.year === maxParts.year && value.month === maxParts.month) {
    return {
      start: 1,
      end: maxParts[part],
    }
  }

  return {
    start: 1,
    end: getDaysInMonth({
      year: value.year,
      monthIndex: value.month - 1,
    }),
  }
}

Handling Date Changes

On change, we construct new parts and go over each lower part to enforce the range. For example, if the date was January 31st and the month was changed to February, we would need to adjust the day to the 28th. We then convert the new parts to a Day object and call the onChange function with the new value.

Generating Options

To generate a list of options from the interval, we use the intervalRange function. This function generates a range of numbers from the start to the end of the interval.

import { range } from "../array/range"
import { Interval } from "./Interval"

export const intervalRange = ({ start, end }: Interval): number[] =>
  range(end - start + 1).map((value) => value + start)

Formatting Options

To format the options, we use the match function, which is a better alternative to a switch statement. It allows us to define a function for each case and call the appropriate function based on the input. We will display numbers for the day and year, and month names for the month.

export function match<T extends string | number | symbol, V>(
  value: T,
  handlers: { [key in T]: () => V }
): V {
  const handler = handlers[value]

  return handler()
}