How to get a custom week value from a WeekPicker in a Form when I submit it

Question

I'm new to ant-design-pro and I'm writing a sample project to help my teammates get more efficient.

Now I faced a problem, I can't get a custom format week value from a WeekPicker in a Form, the week value in the Query String Parameters is week: "2019-12-11T08:45:42.884Z" which is supposed to be YYYYw format, such as week: 201950.

Here is how I defined the Form:

   ...
   <Form onSubmit={this.handleSearch} layout="inline">
        ...
            <FormItem label="">
              {getFieldDecorator('week')(<WeekPicker placeholder="周" format={'YYYYw'} />)}
            </FormItem>
        ...
   </Form>
   ...

and here is the function code:

  handleSearch = (e: React.FormEvent) => {
    e.preventDefault();

    const { dispatch, form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue,
      }
      ...
      dispatch({
        type: 'listAndtableList/fetch',
        payload: values,
      });
    });
  } 

The form gets each field value automatically and it didn't notice that I defined a format in the WeekPicker, anyone can help?

Answer 1

I asked an engineer of Ant Financial which company developed ant-design-pro, and then got the answer.

WeekPicker always input or output a moment object, cause there may be a timezone issue, so we need to handle it by ourselves, although we've set a format in it.

Here is the solution:

form.validateFields((err, fieldsValue) => {
      if (err) return;

      const weekMoment = fieldsValue['week'];
      const week = weekMoment.format('YYYYw');
      ...
});