React relative date input

Completely customizable input and select for choosing an relative date in the future.

Example

Try it here: https://codesandbox.io/s/jzpr5j2n99

Installation

yarn add react-relative-date-input

Usage

import RelativeDatePicker from "react-relative-date-input";

const onChange = (chosenDate) => {
    console.log(chosenDate);
}

const YourForm = () => {
    return (
        <RelativeDatePicker
            onChange={onChange}
        />
    )
}

Props

|Prop name|Description|Example values| |----|----|----| |onChange|Function that is called if the number or period type is changed|(momentDate) => {console.log(momentDate)};| |numberInputClassName|CSS classes for number input field|"form-control"| |numberInputStyle|Object with styles for number input field|{ fontSize: "14px" }| |wrapperClassName|CSS Classes for number input field|"col-md-12"| |wrapperStyle|Object with styles for wrapper|{ padding: "5px" }| |labelClassName|CSS classes for label|"label-class"| |labelStyle|Object with styles for label|{ fontSize: "14px" }| |selectClassName|CSS classes period type select field|"form-control"| |selectStyle|Object with styles for period type select field|{ fontSize: "14px" }| |labelText|Text for label|"Relative date"| |monthsLabel|Text for months in select|"Months"| |daysLabel|Text for days in select|"Days"| |weeksLabel|Text for weeks in select|"Weeks"| |yearsLabel|Text for years in select|"Years"|

Build

npx webpack --config webpack.config.js