React Date Inputs

Simple and lightweight date inputs for your React app.

Installation

Install with npm

npm i --save react-date-inputs

or with yarn

yarn add react-date-inputs

Usage

import React, { useState } from 'react';
import ReactDateInputs from 'react-date-inputs';

const MyComponent = () => {
  const [value, setValue] = useState(new Date());

  return <ReactDateInputs value={value} onChange={setValue} />;
};

Props

prop	type	required	default	description
value	`Date`	-	-
onChange	`(value: Date): undefined`	-	-
onBlur	`(): undefined`	-	-
dayPlaceholder	`string`	-	`'DD'`
monthPlaceholder	`string`	-	`'MM'`
yearPlaceholder	`string`	-	`'YYYY'`
className	`string`	-	-
label	`string`	-	-
disabled	`boolean`	-	`false`
inputComponent	`React.ElementType`	-	-	Component used for inputs. Must use `React.forwardRef` for functional components
labelComponent	`React.ElementType`	-	-	Component used for label
inputComponentProps	`Record<string, unknown>`	-	`{}`	Any additional prop to be passed down to custom input component
labelComponentProps	`Record<string, unknown>`	-	`{}`	Any additional prop to be passed down to custom label component
show	`(keyof typeof Unit)[]`	-	`['day', 'month', 'year']`	Determines which inputs to show
autoTab	`boolean`	-	`false`	Enable automatic tab between inputs. If set to `true`, `inputComponent` must be wrapped in `React.forwardRef()`

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License