afraid-scarlet•2y ago

datepicker mantine

How would I use the 'getInputProps' method of the 'useForm' hook to register a datePicker of @mantine/dates? Currently able to render a date via (although to invoke the calendar, have to move mouse pointer all the way to the end of input field),

import { TextField } from "@pankod/refine-mantine";
...
<TextInput
    mt={8}
    label="Date Rx Rc'd"
    placeholder="Date Rx Rc'd"
    type='date'
    {...getInputProps("date_rx_received")}
>

import { TextField } from "@pankod/refine-mantine";
...
<TextInput
    mt={8}
    label="Date Rx Rc'd"
    placeholder="Date Rx Rc'd"
    type='date'
    {...getInputProps("date_rx_received")}
>

I've seen examples of how to render that in MUI and Ant, but don't know how to implement for mantine,

import { DatePicker } from "@mantine/dates"
<DatePicker
    style={{ marginTop: 20 }}
    label="Date Rx Rc'd"
    {...getInputProps("date_rx_received")}
/>

import { DatePicker } from "@mantine/dates"
<DatePicker
    style={{ marginTop: 20 }}
    label="Date Rx Rc'd"
    {...getInputProps("date_rx_received")}
/>

11 Replies

Omer•2y ago

Hey @UsererOfName 👋, Maybe you can ask this question on Mantine discord ⚡️

afraid-scarlet•2y ago

will do

afraid-scarlet•2y ago

On a similar note, I was browsing the Refine-Mantine documentation for the 'useStepForm' hook (https://refine.dev/docs/api-reference/mantine/hooks/form/useStepsForm/#create-form), and noticed that that example imports the datePicker from @pankod/refine-mantine... and the associated stackBlitz imports it from,

import { DatePicker } from "@mantine/dates";

import { DatePicker } from "@mantine/dates";

useStepsForm | refine

useStepsForm allows you to manage a form with multiple steps. It provides features such as which step is currently active, the ability to go to a specific step and validation when changing steps etc.

afraid-scarlet•2y ago

maybe I can do a quick PR...

Omer•2y ago

wow, it would be great 🎁

afraid-scarlet•2y ago

is there a github for the website? i see it

afraid-scarlet•2y ago

assuming its here https://github.com/refinedev/refine/tree/next/documentation

GitHub

refine/documentation at next · refinedev/refine

Build your React-based CRUD applications, without constraints. - refine/documentation at next · refinedev/refine

Omer•2y ago

Yes! 🍻 https://refine.dev/docs/contributing/#starting-documentation-in-watch-mode

Contributing | refine

We follow a code of conduct when participating in the community. Please read it before you make any contributions.

afraid-scarlet•2y ago

https://github.com/refinedev/refine/pull/3194

GitHub

refine-mantine API Documentation update for 'useStepForm' hook. by ...

Existing code in documentation (https://refine.dev/docs/api-reference/mantine/hooks/form/useStepsForm/) had incorrect import statements. Synced documentation with the code that works in accompanyi...

afraid-scarlet•2y ago

I guess I can make sure the documentation renders locally it renders in Github it renders locally looks like the commit message needs to be modified to pass linting... idk how to change the commit message at the moment via Github's UI... may revisit later

Omer•2y ago

It's no problem. We can fix it before merge 👍