harsh-harlequin•2y ago

Is there a way to submit a Timepicker form value as a string?

I am using ant design TimePicker component and when I submit the form the submitted data is an dayjs object. I want to submit is as an string format to API. I have tried changing the form data before submitting it using this link https://refine.dev/docs/faq/#how-can-i-change-the-form-data-before-submitting-it-to-the-api as below:

    const onSubmit = (values) => {
        return(
            onFinish && onFinish({
                ...values,
                "start_time": values?.start_time.format("hh:mm A"),
                "end_time": values?.end_time.format("hh:mm A")
            })
        )

    }

    const onSubmit = (values) => {
        return(
            onFinish && onFinish({
                ...values,
                "start_time": values?.start_time.format("hh:mm A"),
                "end_time": values?.end_time.format("hh:mm A")
            })
        )

    }

And it is working as expected. But now I have a requirement where I have a dynamic form with multiple nested values that have time in it. So now how can I achieve it for the nested fields. For example my nested field is as:

{
    "route": 7,
    "shift": "N",
    "start_time": "05:00 PM",
    "end_time": "09:00 AM",
    "price": "1234",
    "pickup_points": [
        {
            "time": "2022-12-05T11:15:00.078Z",
            "point": 14
        },
        {
            "time": "2022-12-05T11:25:00.078Z",
            "point": 3
        }
    ],
    "drop_points": [
        {
            "time": "2022-12-05T03:15:00.329Z",
            "point": 11
        }
    ]
}

{
    "route": 7,
    "shift": "N",
    "start_time": "05:00 PM",
    "end_time": "09:00 AM",
    "price": "1234",
    "pickup_points": [
        {
            "time": "2022-12-05T11:15:00.078Z",
            "point": 14
        },
        {
            "time": "2022-12-05T11:25:00.078Z",
            "point": 3
        }
    ],
    "drop_points": [
        {
            "time": "2022-12-05T03:15:00.329Z",
            "point": 11
        }
    ]
}

Here my pickup_points and drop_points can have as many data with time in it. Is there a way to submit a form data as a formatted string instead of submitting as dayjs object?

FAQ | refine

How can I change the form data before submitting it to the API?

1 Reply

harsh-harlequin•2y ago

I solved the problem by updating the form data before submitting for nested values as well

    const onSubmit = (values: IConfiguration) => {
        return(
            onFinish && onFinish({
                ...values,
                "start_time": values?.start_time.format("hh:mm A"),
                "end_time": values?.end_time.format("hh:mm A"),
                "pickup_points": values?.pickup_points?.map((point) => ({...point, "time": point.time.format("hh:mm A")})),
                "drop_points": values?.drop_points?.map((point) => ({...point, "time": point.time.format("hh:mm A")}))
            })
        )

    }

    const onSubmit = (values: IConfiguration) => {
        return(
            onFinish && onFinish({
                ...values,
                "start_time": values?.start_time.format("hh:mm A"),
                "end_time": values?.end_time.format("hh:mm A"),
                "pickup_points": values?.pickup_points?.map((point) => ({...point, "time": point.time.format("hh:mm A")})),
                "drop_points": values?.drop_points?.map((point) => ({...point, "time": point.time.format("hh:mm A")}))
            })
        )

    }

But I would like to know if there is a way to submit the form without overriding the submit method.