fascinating-indigo•13mo ago

Display the date in a TextField within an <Edit> component (MUI)

How can I correctly display the date in a TextField within an <Edit> component? The API returns a value of '2023-07-25T03:00:00.000Z' for the 'start_date' attribute, but I'm not sure how to format this for the TextField. I get a warning that this value doesn't conform to the required format, 'yyyy-MM-dd'. Here is my current code:

``jsx
<Grid item xs={12} md={6} lg={3}>
  <TextField
    {...register("start_date", {
      validate: (value) => {
        return new Date(value).getTime() > new Date().getTime()
          ?

${type ?? ""} ${translate("customers.validate.start_date")}


          : true;
      },
      valueAsDate: true,
    })}
    error={!!(errors as any)?.start_date}
    helperText={(errors as any)?.start_date?.message}
    margin="normal"
    fullWidth
    type="date"
    InputLabelProps={{ shrink: true }}
    label={

${type ?? ""} ${translate("customers.fields.start_date")}`} name="start_date" /> </Grid>

3 Replies

kapa.ai•13mo ago

Hi @.martola. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're facing is due to the format of the date returned by the API. The 'start_date' attribute value '2023-07-25T03:00:00.000Z' is in ISO 8601 format, but the TextField of type 'date' expects the date in 'yyyy-MM-dd' format. To resolve this, you can use a date library like Day.js to format the date. Day.js is used by refine to display date format as mentioned in the documentation (https://refine.dev/docs/api-reference/mui/components/fields/date). Here's how you can modify your code:

import dayjs from 'dayjs';

// ...

<Grid item xs={12} md={6} lg={3}>
  <TextField
    {...register("start_date", {
      validate: (value) => {
        return new Date(value).getTime() > new Date().getTime()
          ? `${type ?? ""} ${translate("customers.validate.start_date")}`
          : true;
      },
      valueAsDate: true,
    })}
    error={!!(errors as any)?.start_date}
    helperText={(errors as any)?.start_date?.message}
    margin="normal"
    fullWidth
    type="date"
    InputLabelProps={{ shrink: true }}
    label={`${type ?? ""} ${translate("customers.fields.start_date")}`}
    name="start_date"
    defaultValue={dayjs(queryResult?.data?.data?.start_date).format('YYYY-MM-DD')}
  />
</Grid>

import dayjs from 'dayjs';

// ...

<Grid item xs={12} md={6} lg={3}>
  <TextField
    {...register("start_date", {
      validate: (value) => {
        return new Date(value).getTime() > new Date().getTime()
          ? `${type ?? ""} ${translate("customers.validate.start_date")}`
          : true;
      },
      valueAsDate: true,
    })}
    error={!!(errors as any)?.start_date}
    helperText={(errors as any)?.start_date?.message}
    margin="normal"
    fullWidth
    type="date"
    InputLabelProps={{ shrink: true }}
    label={`${type ?? ""} ${translate("customers.fields.start_date")}`}
    name="start_date"
    defaultValue={dayjs(queryResult?.data?.data?.start_date).format('YYYY-MM-DD')}
  />
</Grid>

In the above code, dayjs(queryResult?.data?.data?.start_date).format('YYYY-MM-DD') is used to format the date into 'yyyy-MM-dd' format. Replace queryResult?.data?.data?.start_date with your actual date value. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@434784410907443210> kapa.ai is still learning and improving, please let us how it did by reacting below

fascinating-indigo•13mo ago

  useEffect(() => {
    if (queryResult?.data?.data?.start_date) setValue("start_date", dayjs(queryResult?.data?.data?.start_date).format('YYYY-MM-DD'));
    if (queryResult?.data?.data?.birthday) setValue("birthday", dayjs(queryResult?.data?.data?.birthday).format('YYYY-MM-DD'));
  }, [queryResult, setValue])

  useEffect(() => {
    if (queryResult?.data?.data?.start_date) setValue("start_date", dayjs(queryResult?.data?.data?.start_date).format('YYYY-MM-DD'));
    if (queryResult?.data?.data?.birthday) setValue("birthday", dayjs(queryResult?.data?.data?.birthday).format('YYYY-MM-DD'));
  }, [queryResult, setValue])

this solution work for me