Is there a way to solve this TypeScript & Mantine not-assignable DateValue error?

Question

The project dependencies are as follows:

"dependencies": {
    "@mantine/core": "^7.6.2",
    "@mantine/dates": "^7.6.2",
    "@mantine/form": "^7.6.2",
    "@mantine/hooks": "^7.6.2",
    "dayjs": "^1.11.10",
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18",
    "uuid": "^9.0.1"
  }

MantineForm.tsx file:

export default function MantineForm() {
    const form = useForm({
        initialValues: {
            visitorName: "",
            firmName: "",
            purposeOfVisit: `${PurposeOfVisit.Subcontractor}`,
            vehicleLicense: "",
            email: "",
            phone: 0,
            visitDateTime: new Date(),
            isSafetyInstructionsGiven: false,
            isGeneralVisitGuideGiven: false,
            isTaskingDocumentReceived: false,
        },

        // validate: {},
    });

and inside MantineForm component, error is in here

<DateTimePicker
     value={form.values.visitDateTime}
     onChange={(val) => form.setFieldValue("visitDateTime", val)}
     label="Ziyaret Tarih ve Saati"
     clearable
     valueFormat="DD.MM.YYYY - HH:mm"
     locale="tr"
/>

val in the part of form.setFieldValue("visitDateTime", val) here gives the below error

Argument of type 'DateValue' is not assignable to parameter of type 'Date | ((prevValue: Date) => Date)'. Type 'null' is not assignable to type 'Date | ((prevValue: Date) => Date)'.ts(2345)

How can I solve this type problem?

Yogesh G · Accepted Answer · 2024-04-17 04:58:05Z

0

It simply means that val can be null, which is not acceptable as second argument while calling form.setFieldValue.

To fix this: You can simply convert your onChnage to:

onChange={(val) => val && form.setFieldValue("visitDateTime", val)}

Another option can be to remove the prop clearable in DateTimePicker, so that you always receive some valid value.

answered Apr 17, 2024 at 4:58

Yogesh G

1,1601 gold badge10 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shah Vipul · Accepted Answer · 2024-04-17 05:04:29Z

0

<DateTimePicker
     value={form.values.visitDateTime}
     onChange={(val) => form.setFieldValue("visitDateTime", val === null ? null : val)}
     label="Ziyaret Tarih ve Saati"
     clearable
     valueFormat="DD.MM.YYYY - HH:mm"
     locale="tr"
/>

answered Apr 17, 2024 at 5:04

Shah Vipul

7759 silver badges11 bronze badges

Collectives™ on Stack Overflow

Is there a way to solve this TypeScript & Mantine not-assignable DateValue error?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related