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
Omer2y ago
Hey @UsererOfName 👋, Maybe you can ask this question on Mantine discord ⚡️
exotic-emerald
exotic-emerald2y ago
will do
exotic-emerald
exotic-emerald2y 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.
exotic-emerald
exotic-emerald2y ago
maybe I can do a quick PR...
Omer
Omer2y ago
wow, it would be great 🎁
exotic-emerald
exotic-emerald2y ago
is there a github for the website? i see it
exotic-emerald
exotic-emerald2y ago
GitHub
refine/documentation at next · refinedev/refine
Build your React-based CRUD applications, without constraints. - refine/documentation at next · refinedev/refine
Omer
Omer2y ago
Contributing | refine
We follow a code of conduct when participating in the community. Please read it before you make any contributions.
exotic-emerald
exotic-emerald2y ago
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...
exotic-emerald
exotic-emerald2y 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
Omer2y ago
It's no problem. We can fix it before merge 👍