Как получить и изменить значение даты

Question

Я работаю над проектом Reactjs, и мне нужно установить дату гарантии. Эта дата гарантии - дата установки + 1 год.

В моем коде при создании клиента я могу указать дату установки. Эта дата вводится с помощью средства выбора даты Reaction-DatePicker .

Вот мой код, решение:

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);

Я нене знаю, как настроить дату моей гарантии.

Редактировать для Dupocas

Я получил 2 ошибки этим методом:

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

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

Answer 1

Допустим следующую дату

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

Один из многих способов увеличения даты - использовать getTime() и добавить корреспондента ms перед преобразованием его обратно в разборчивое 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)

Теперь предположим, что это 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}
             />
        )
    }
}

Если вам нужно выполнить много операций, связанных с датами, вам обязательно нужно посмотреть date-FNS