Skip to Content
ComponentsDateInput

DateInput

Input field with calendar that lets user enter dates.

Source

#

Documentation

#

Usage

"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>
  );
}

#

Controlled

Use the value and defaultValue props to toggle between controlled and uncontrolled usage. And combine it with onValueChange / onChange to listen for changes to the state.

Input value: 

"use client";
 
import { DateInput, Flex, Text } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("");
 
  return (
    <Flex w="224">
      <DateInput onValueChange={setValue} value={value} />
      <Text fontSize="md">Input value: {value}</Text>
    </Flex>
  );
}

#

Error state

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

"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.

"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.

"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.

"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

onValueChange

Handler that is called when the value changes.

(value: string) => void

placeholder

The placeholder date and time to use when no value has yet been selected.

The value format must an Instant, PlainDate, PlainDateTime, or PlainTime.

string

size

Control the size of the input.

"md" | "lg" | "xl"

type

Control whether the input allows only date or both date and time.

"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

SpaceWhen 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.
EnterSelects the focused day in the calendar.
ArrowUp ArrowDown
ArrowRight ArrowLeft
Navigate between days in the calendar.
PageUp PageDown
Navigate between months in the calendar.
ShiftPageUp ShiftPageDown
Navigate between years in the calendar.
EscCloses 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
Last updated on
DataTableDateRangePicker