@goran.cogic.fws/react-date-inputs
v1.8.4
Published
Simple date inputs for React
Downloads
32
Maintainers
Readme
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.