DateRagePicker with month only selection

[Alexander Kuhlmann]

Hi Support Team,

I like to use a DateRagePicker to select a startdate and an enddate, but in my case I just want to select full month.
So the underlying DateTime/DateOnly variable for the startdate should always be the first day of the selected month and the variable for the enddate should alwys be the last day of the selected month.

for me there are two neccesary steps for this:

1) let the user just select month an prevent showing the day selection part.

2) setting the correct variable values.

If the second part is not directly done by the DateRagePicker component, I can adjust the values after the component fired the change event. But for the first part I need a solution inside the component itself I thing.

I would be happy to get some help from you.

[UdhayaKumar Duraisamy]

You can use the Start and Depth properties to set both to Year, allowing the DateRangePicker to select a range of months instead of specific dates. Below is a code snippet illustrating this approach:

<SfDateRangePicker TValue="DateTime?" Start='CalendarView.Year' Depth='CalendarView.Year' Placeholder="Select a range"></SfDateRangePicker>

Sample: https://blazorplayground.syncfusion.com/embed/LDVpDlCVRUJOVpJh?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Alexander Kuhlmann]

Thank you.

This is working.

I was confused because the documentation tell:

Always the Depth view has to be smaller than the Start view, otherwise the view restriction will be not restricted.

But now everything is working.

[Shereen Shajahan]

Hi Alexander,

Thank you for the update. Please get back to us for assistance in the future.

Regards,

Shereen