like-gold
like-gold2y 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
like-gold
like-gold2y 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.