Datepicker should have month/year selection

[tracker1]

Datepicker title click should switch to a month picker, then the month picker a year spinner/picker. The pattern was first really codified in the MS Ajax Toolkit, probably the only thing I liked in that framework.

The issue is that someone will use this library, and then use it for something like a date of birth field.

[rtivital]

Hi Michael, I understand your point, but this is not a common pattern. You can add year and month picking to DatePicker with withSelect prop – https://mantine.dev/dates/date-picker/#year-and-month-picker We've chosen this pattern because most of the users are familiar with it and in most cases it will take less effort to switch into the desired year and month.

[tracker1]

@rtivital thanks for pointing that out... I really didn't go that far down... When reviewing new UI components, the date of birth use case, how resizing the view (mobile vs desktop), and how modals and the background scrolling are handled (suppressed or not) are the main things I look at. They're just common issues that I tend to find in new frameworks when I come across them.

The pattern mentioned is relatively popular, and is part of the Fluent UI pattern for Calendar pickers. I also like the Cupertino (Apple) picker as well. Not as fond of the Material UI picker, though it's my favorite UI outside that.

Far from perfect, but I did make one myself a few years ago here. The demo is in multi-month display mode, and will shrink when the screen is too small to fit the 3 months. I don't even recall what it was originally for. I now tend to just use type="date" on the input components deferring to the browser/system selector.

[tracker1]

https://github.com/tracker1/md-datepicker

[rtivital]

Thanks for feedback, we will be implementing something similar in future versions, it looks better than current implementation with two selects.

[gregorybellencontre]

Hello @rtivital I don't find any option to turn the date picker into a month picker. You were talking about the withSelect prop, but it seems it doesn't exist anymore. I checked the releases notes, but I didn't find any information about it.

[rtivital]

No DatePicker cannot be converted to MonthPicker

[gregorybellencontre]

Ok. And there's no other solution for month picking in Mantine ?

[rtivital]

No

[elarens]

Vitaly, is there any plan to add monthly picker functionality in foreseeable future? It's quite useful

[geoffreyhale]

Our team would love a MonthPicker

[rtivital]

I will not have the capacity to work on this any time soon

[Nzent]

Also, add a year picker too if you have time 👍

[UsamaEjaz0]

Please add month picker and year picker

[barissayil]

Hi @rtivital I think adding MonthPicker and YearPicker which are slightly modified versions of DatePicker would be perfect. Do you think we could have this in the next few months, or if not at a later time?

[rtivital]

https://v6.mantine.dev/changelog/6-0-0/#updated-mantinedates-package

[Jshihs]

Hi rtivital, how can i use mantinedates package (month range picker, single month allowed) in dash plotly (python)?

[rtivital]

If it supports react, then yes

[Jshihs]

hi rtivital, thanks for quick reply. I am quite a newbie that I am not sure that i understand how to make it work in my coding. Here below is a brief coding and that will shows dates in selection. Kindly advise how to have only month shown as Mantine MonthPicker work in my python coding. thank you

import dash_bootstrap_components as dbc import dash_mantine_components as dmc from datetime import date, datetime

layout = dbc.Row([ dbc.Col([ dmc.DatePicker( id='start_date', label='Start date:', value=datetime.now().date().replace(month=1,day=1), ), ], width={'size':4,}),
dbc.Col([ dmc.DatePicker( id='end_date', label='End date:', value=datetime.now().date().replace(month=12,day=31), ), ], width={'size':4,}), ])

[rtivital]

You should ask this question in dash-mantine repo, I do no have any experience with Python