How to manually type in dates in Dash Mantine Date Range Picker?

Dash Python
,
1

This question has been asked 2 years ago but there was no solution to it.

What I am trying to do is to make Dash Mantine Component Library’ “date range picker” (Dash) manually typeable, so that in addition to selecting the dates, optionally I can just type in the date range.

My users toggle with date range a lot and it’s honestly a bit too many clicks when they have to “select” a date range instead of being able to type it (especially when the date range span multiple years).

Further information, I notice that even the React Mantine Library doesn’t seem to have this ability for its Date Range Picker (https://v3.mantine.dev/dates/date-range-picker/), so not sure if this is even possible with Dash Mantine. In case it turns out it is not (atleast yet), then any suggestions on how I can workaround this feature? I am using Dash Mantine library itself for other fields too (date, text input, number input etc), so in terms of look/feel, wouldn’t want to deviate from it too much.

Thank you,

2

Hi @manish1022iiti

Did you try adding this prop?

allowFreeInput=True
3

Hello @AnnMarieW Thanks for your reply.
I think this parameter only exists in the “date” picker and NOT “daterange” picker. Weird why this was designed this way, unless I am missing something here.

4

Yes, I see that you are correct - the allowFreeInput is only on the DatePicker. It also looks like this is not a valid prop in the latest version of Mantine, so it likely won’t be available in future versions of dmc either.

5

Seems like so, yes!