Week/Month/Quarter/Year pickers

[jerebtw]

Usage example, including component/hook API

Add a week/month/quarter/year select

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week

Possible implementation – describe how the feature can be implemented

No response

Do you want to contribute this feature and create a pull request

No response

[rtivital]

Well, I guess we can also add MonthPicker, YearPicker and QuarterPicker components as well including range variants. Just curious for what are you using week select?

[lucas-santosP]

Ex: A page that lists payments made per week, I would like to have a filter to limit viewing strictly by weeks and not a free range of two date values.

The week picker is indeed a less frequent use case, but would be useful to have it. And right now is the only "date-related" picker missing in the lib.

[rtivital]

https://mantine.dev/dates/calendar/#custom-date-pickers

[vishnup-ditto]

We built something like on top of mantine date picker for our Finance platform. Can share some implementation details if this is similar to what you are looking for.

[tombohub]

yes, and quarter picker is also useful for financial analytics

[santisemhan]

We built something like on top of mantine date picker for our Finance platform. Can share some implementation details if this is similar to what you are looking for.

Could you do it with Mantine? Do you have the implementation?

[jerebtw]

For a timetable app

[jerebtw]

@rtivital could you please add the Help wanted label because i don't know much about the date package

[rtivital]

Help is not wanted, it's a large feature, I'll work on it on my own when I have time for this

[jerebtw]

Ohhh okay

[LucasLemanowicz]

A more generic implementation of this could be to allow for "Defined Ranges" that the implementer defines. The interface could look something along the lines of:

interface DefinedDateRange {
    label: string;
    dateRange: {
        startDate?: Date,
        endDate?: Date,
    }
}

and the DateRangePicker would take in a staticRanges: DefinedDateRange[] prop, similar to what react-date-range does: https://hypeserver.github.io/react-date-range/

This would be incredibly useful for me (if you need any additional signal on the value of this feature).

[BenSilver1337]

Thanks!

[vishnup-ditto]

Hi, I am looking to override the existing DateRange picker as a variation which allows you to one click select last 7 days, last month, last quarter etc. Assume for the generation of reports or data for a particular period. Haven't been very successful though. Very similar to the hyperserver version linked in jerebtw comments. hypeserver.github.io/react-date-range. Has anybody been successful in implementing something like this with Mantine.

[zhulien-ivanov]

Hi, I am looking to override the existing DateRange picker as a variation which allows you to one click select last 7 days, last month, last quarter etc. Assume for the generation of reports or data for a particular period. Haven't been very successful though. Very similar to the hyperserver version linked in jerebtw comments. hypeserver.github.io/react-date-range. Has anybody been successful in implementing something like this with Mantine.

Make the DateRangePicker controlled and assign the date ranges yourself (on button click). It is pretty straightforward.

[vishnup-ditto]

I understand the use of the value prop in selecting the ranges I want, that's cool. I wanted to override the UI of datepicker popover, modal to include these button as sidebar or something.

[vishnup-ditto]

One way that came to mind is to build my own rangepicker using the calendar base and as such, with my own custom UI incorporated? Just wanted to enquire if there is a easier way to achieve this than that.

[zhulien-ivanov]

I solve this by using a button next to the picker that opens a popover with button options.

[vishnup-ditto]

Okay, So something like

  <Popover>
    <Popover.Target>
      <Button>Open DatePicker</Button>
    </Popover.Target>
    <Popover.Dropdown>
      <OtherUIWeWant/>
      <DateRangePicker   />
    </Popover.Dropdown>
  </Popover>

[GuiPretto]

Hi! I'm using Mantine for the first time this month and I'm really enjoying it, congrats on developing this framework. But I'm here for this discussion, @rtivital you said earlier that you would make this yourself, but its been a long time already, do you still have any plans on doing it? And if not, am I able to do it for you? Currently this component is one of my necessities on the projects I'm working with.

[rtivital]

https://rtivital.github.io/mantine-dates-6/

[GuiPretto]

Nice, thank you.

[telmen]

hi @rtivital, any eta on v6 release?

[rtivital]

No, there is not

[tombohub]

@rtivital thanks, do you have in plan to make quarter picker?