1.8.4 • Published 10 months ago
@goran.cogic.fws/react-date-inputs v1.8.4
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.