@abizzle/react-date-input

An unstyled, dependency-free replacement for <input type="date" /> for React projects.

This project borrows concepts and code from MUI's Date Field component.

Installation

npm install @abizzle/react-date-input

Usage

Via hook:

import { useDateInput, UseDateInputParams } from "@abizzle/react-date-input":

export type MyDateInputProps = UseDateInputParams;

export function MyDateInput(props: MyDateInputProps) {
  const { inputProps } = useDateInput(props);

  return <input {...inputProps} />
}

Via component:

import { DateInput, DateInputProps } from "@abizzle/react-date-input":

export type MyDateInputProps = DateInputProps;

export function MyDateInput(props: MyDateInputProps) {
  return <DateInput {...props} />
}

The useDateInput hook and DateInput component both accept these optional props:

Prop	Description
defaultValue	A date string (Ex. "2012-12-21")
inputMode	An inputmode to override the default value of "numeric" used by useDateInput/DateInput
locale	A Unicode locale identifier string (Ex. "en-US") used to determine the order of date elements (Ex. "MM/DD/YYYY" vs. "DD/MM/YYYY") as well as the character to use for month, day, and year placeholders. Supported placeholder languages include: English, Spanish, German, Finnish, French, Hungarian, Icelandinc, Italian, Kazakh, Norwegian, Romanian, Russian, and Turkish. Defaults to Navigator.language.
onBlur	React.FocusEventHandler<HTMLInputElement>
onChange	React.ChangeEventHandler<HTMLInputElement>
onClick	React.MouseEventHandler<HTMLInputElement>
onDateChange	(date: string | null) => void. If not null, date will be a valid date string (Ex. "2012-12-21")
onFocus	React.FocusEventHandler<HTMLInputElement>
onKeyDown	React.KeyboardEventHandler<HTMLInputElement>
onMouseUp	React.MouseEventHandler<HTMLInputElement>
onPaste	React.ClipboardEventHandler<HTMLInputElement>
readOnly	Treat the <input/> as readonly.
ref	React.Ref<HTMLInputElement>
value	A date string (Ex. "2012-12-21"). Provide this prop to use "controlled input".

The DateInput component additionally accepts every prop for an <input/> component except max, min, step, and type as they are not supported.