How to get and modify the Date value

Question

I'm working on a Reactjs project and I have to set up a warranty date. This warranty date is the Installation date + 1 year.

In my code when I create a Client I can put an Installation Date. This date is entered by a Date Picker react-datepicker.

Here is my code, the solution :

class CreateClient extends React.Component {
  state = {
    installDate: null,
    warrantyDate: null
  };

  handleChange = date => {
    const warrantyDate = new Date(new Date(date).getTime() + 86400000 * 365);
    this.setState({
      installDate: date,
      warrantyDate
    });
  };

  render() {
    const { classes, translate, ...props } = this.props;
    return (
      <Create {...props} title={<ClientCreateTitle />}>
        <TabbedForm>
          <FormTab label="resources.client.tabs.identity">
            <TextInput autoFocus source="name" required />
            <TextInput
              type="email"
              source="email"
              validation={{ email: true }}
              formClassName={classes.email}
              validate={[required(), email()]}
            />
            <TextInput
              type="phone"
              source="phone"
              validation={{ phone: true }}
              formClassName={classes.phone}
            />
          </FormTab>
          <FormTab label="resources.client.tabs.address" path="address">
            <LongTextInput
              source="address"
              formClassName={classes.address}
              label="resources.client.localisation.address"
              required
            />
            <TextInput
              source="zipcode"
              formClassName={classes.zipcode}
              label="resources.client.localisation.zipcode"
              required
            />
            <TextInput
              source="city"
              formClassName={classes.city}
              label="resources.client.localisation.city"
              required
            />
            <TextInput
              source="country"
              formClassName={classes.country}
              label="resources.client.localisation.country"
              required
            />
          </FormTab>
          <FormTab label="resources.client.tabs.equipment" path="equipment">
            {/* <DateInput
          source="installAt"
          label="resources.client.info.installationDate"
        /> */}
            <DatePicker
              selected={this.state.installDate}
              onChange={this.handleChange}
            />
            <DisabledInput
              source="warrantyDate"
              label="Date de garantie (Automatique)"
              defaultValue={this.state.warrantyDate}
            />
          </FormTab>
        </TabbedForm>
      </Create>
    );
  }
}

export default withStyles(styles)(CreateClient);

I don't know how to set up my warranty date.

Edit for Dupocas

I got 2 errors with this method :

Warning: Failed prop type: Invalid prop `value` supplied to `TextField`.

Warning: Failed prop type: Invalid prop `value` supplied to `Input`.

Answer 1

Assume the following date

const date = new Date('2019-10-01')

One of many ways of incrementing a date is to use getTime() and add the correspondent ms before converting it back to a legible date

   const date = new Date('2019-10-01')
   const oneYearFromNowInMs = date.getTime() + (86400000 * 365) //ms in a day times 365
   const newDate = new Date(oneYearFromNowInMs)
   console.log(newDate)

Now assume this Component

class Component extends React.Component {
    state = {
        startDate : null,
        warrantyDate : null
    }

    handleChange = date => {
        const warrantyDate = new Date(new Date(date).getTime() + (86400000*365))
        this.setState({
            startDate: date,
            warrantyDate
        })
    }

    render(){
        return(
            <DatePicker
                selected={this.state.startDate}
                onChange={this.handleChange}
             />
        )
    }
}

If you need to perform many operations involving dates you should definitely take a look date-fns