React Antd not able to get value from custom date picker

Question

I am currently using custom datepicker to enter date in the format 'MMDD' or 'MMDDYY' and setting the value in state and using in the datepicker component as controlled component. But on submit of form the datepicker value is undefined.

Please find the code in the codesandbox and correct me on what i am doing wrong in this one.

https://codesandbox.io/s/damp-haze-mmj80

Answer 1

Only had to add a componentDidMount cycle:

componentDidMount = () => {
  this.props.onChange(this.state.value.format('YYYY-MM-DD'));
};

handleOnChange = date => {
  if (!!date) {
    this.setState({ value: date });
    this.props.onChange(date.format('YYYY-MM-DD'));
  }
};

Answer 2

I've not used that library (antd), but looking at the docs for it, using that fieldDecorator adds two properties to the component -- onChange and value.

  {getFieldDecorator("date-picker")(<CustomDatePicker />)}

So now imagine CustomDatePicker has those two properties. Value will be the value of the form item, and onChange is expecting to be called as the onChange handler of a form input.

However, in your CustomDatePicker component you aren't doing anything with either of those. Instead, you're tracking the value (and updating it with a handler) locally to that component with local state.

Instead, you should use those two properties:

 class CustomDatePicker extends React.Component {
  state = {
    isOpen: false
  };

  render() {
    return (
      <DatePicker
        value={this.props.value}
        format={this.state.isOpen ? ["MMDD", "MMDDYY"] : "MM/DD/YY"}
        placeholder=" -- Select Date --"
        disabledDate={d => d && d > moment(Date.now())}
        onOpenChange={status => {
          this.setState({ isOpen: status });
        }}
        onChange={this.props.onChange}
      />
    );
  }
}

If you want to do any initial value logic, or validation, you'll do that at the form-level component -- the one that is controlling the state.