VirtuaBoza@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 notnull,datewill be a valid [date string](https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats#date_strings) (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.