Question

我正在研究Reactjs项目，我必须设置保修日期。此保修日期为安装日期+ 1年。

在创建客户端时，可以在代码中输入安装日期。该日期由日期选择器react-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

如何获取和修改日期值

为Dupocas编辑

1 个答案: