Decade and Century view in Blazor

[gil shalit]

Is it possible to show the decade and century views of the DateRangePicker in Blazor similar to what is available on the Flutter version? I cant see any mention of this in the documentation.

Thanks!

[Priyanka Karthikeyan]

Hi gil shalit,

Thank you for reaching out to us.

Yes, you can select a range of years using Syncfusion's SfDateRangePicker component in Blazor. To achieve this, you need to configure the component to use the Decade view.

Here's the code snippet to implement year range selection:

<SfDateRangePicker TValue="DateTime?" Value='@DateValue' Format="yyyy" Placeholder='Select Date' Start='CalendarView.Decade' Depth='CalendarView.Decade'>
</SfDateRangePicker>

@code {
    public DateTime? DateValue {get;set;} = DateTime.Now;
}

In this implementation:

• Start='CalendarView.Decade' - Shows the decade view initially when the picker opens
• Depth='CalendarView.Decade' - Restricts the navigation to decade view only, allowing users to select years
• Format="yyyy" - Displays only the year in the input

You can find a sample implementation here: https://blazorplayground.syncfusion.com/rXVTjAjwhLWCpJnf

Regards,

Priyanka K