DateInput

Input field with calendar that lets user enter dates.

Source

#
Documentation

#
Usage

Input label

Description

Error

Label

Required


"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { DateInput, Field } from "@optiaxiom/react";
 
export function App({
  description,
  error,
  label = "Input label",
  required = false,
}: Pick<
  ComponentPropsWithoutRef<typeof Field>,
  "description" | "error" | "label" | "required"
>) {
  return (
    <Field
      description={description}
      error={error}
      label={label}
      required={required}
      w="224"
    >
      <DateInput />
    </Field>
  );
}

#
Error state

Enable the error prop to display the error state of the input field.

Error


"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { DateInput } from "@optiaxiom/react";
 
export function App({
  error = true,
}: Pick<ComponentPropsWithoutRef<typeof DateInput>, "error">) {
  return <DateInput error={error} />;
}

#
Disabled state

Enable the disabled prop to toggle the disabled state of the input field.

Disabled


"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { DateInput } from "@optiaxiom/react";
 
export function App({
  disabled = true,
}: Pick<ComponentPropsWithoutRef<typeof DateInput>, "disabled">) {
  return <DateInput disabled={disabled} />;
}

#
Required

By default we show a clear button when there is value but this can be removed by toggling the required prop.

Start dateRequired


"use client";
 
import { DateInput, Field } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field label="Start date" required w="224">
      <DateInput required />
    </Field>
  );
}

#
Max

Use the max prop to specify the latest date the user can enter. Will disable all dates after the specified date.


"use client";
 
import { DateInput } from "@optiaxiom/react";
 
export function App() {
  return <DateInput defaultValue="2025-05-15" max="2025-05-20" />;
}

#
Min

Use the min prop to specify the earliest date the user can enter. Will disable all dates prior to the specified date.


"use client";
 
import { DateInput } from "@optiaxiom/react";
 
export function App() {
  return <DateInput defaultValue="2025-05-15" min="2025-05-10" />;
}

#
Date and time

Use the type prop to switch between date and datetime-local inputs.

Type


"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { DateInput } from "@optiaxiom/react";
 
export function App({
  type = "datetime-local",
}: Pick<ComponentPropsWithoutRef<typeof DateInput>, "type">) {
  return <DateInput type={type} />;
}

#
Weekend

Use the weekend prop to provide one or more matchers to denote weekends on the calendar.


"use client";
 
import { DateInput } from "@optiaxiom/react";
 
export function App() {
  return <DateInput weekend={{ dayOfWeek: [0, 6] }} />;
}

#
Holiday

Use the holiday prop to provide one or more matchers to denote holidays on the calendar.


"use client";
 
import { DateInput } from "@optiaxiom/react";
 
export function App() {
  return <DateInput holiday={(day) => day.getDate() === 5} />;
}

#
Props

#
DateInput

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`addonAfter` Display content inside the input at the end. `ReactNode`
`addonBefore` Display content inside the input at the start. `ReactNode`
`addonPointerEvents` When this prop is set to `none` clicking empty space inside the addon will focus the input box. `"none" \| "auto"`
`appearance` Control the appearance of the input. `"number" \| "default"`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`disabled` Whether the input is disabled. `false \| true`
`error` Whether to show the input error state. `false \| true`
`holiday` Apply the `holiday` modifier to the matching days. `false \| true \| (date: Date) => boolean \| Date \| Date[] \| DateRange \| DateBefore \| DateAfter \| DateInterval \| DayOfWeek \| Matcher[]`
`htmlSize` Control the native input `size` attribute. `number`
`size` Control the size of the input. `"md" \| "lg" \| "xl"`
`type` `"date" \| "datetime-local"` Default: `date`
`weekend` Apply the `weekend` modifier to the matching days. `false \| true \| (date: Date) => boolean \| Date \| Date[] \| DateRange \| DateBefore \| DateAfter \| DateInterval \| DayOfWeek \| Matcher[]`

#
Accessibility

#
Keyboard interactions

Key	Description
`Space`	When focus is on `DateInput`, opens the calendar and focuses the selected day (or today’s date). When focus is on a day, selects the focused day.
`Enter`	Selects the focused day in the calendar.
`ArrowUp` `ArrowDown` `ArrowRight` `ArrowLeft`	Navigate between days in the calendar.
`PageUp` `PageDown`	Navigate between months in the calendar.
`⇧PageUp` `⇧PageDown`	Navigate between years in the calendar.
`Esc`	Closes the calendar popover and moves focus back to `DateInput`.

#
Changelog

#
1.4.0

Moved component out of Alpha.


// Before
import { DateInput } from "@optiaxiom/react/unstable";
 
// After
import { DateInput } from "@optiaxiom/react";

#
0.12.1

Added component