RadMonthYearPicker - Show only the current year

[Bob]

Hi,

I'm following the setup for "RadMonthYearPicker" with the link below: 

https://demos.telerik.com/aspnet-ajax/monthyearpicker/overview/defaultcs.aspx

My need is to show only the current year (2025). In this case Year 2021-2024 and 2026-2030 should be hidden or removed from the popup.

Is there a property to do so? Or is there a workaround?

 

Thanks,

Bob

[Vasko]

Hi Bob,

To achieve the functionality of displaying only the current year (2025) in the RadMonthYearPicker, you can use client-side code to manipulate the popup content, as there is no direct property to limit the years displayed. For that, you can utilize the OnPopupOpening event, get all the items inside the popup, and hide the years that are not the current one: 

<telerik:RadMonthYearPicker ID="RadMonthYearPicker1" runat="server">
    <ClientEvents OnPopupOpening="onPopupOpening" />
</telerik:RadMonthYearPicker>

function onPopupOpening(sender, args) {
    setTimeout(() => {
        let pickerItems = document.querySelectorAll(".RadCalendarFastNavPopup td a");

        pickerItems.forEach((item) => {
            let itemText = item.innerHTML;
            let itemValue = parseInt(itemText);

            if (!isNaN(itemValue) && itemValue !== 2025) {
                item.style.display = 'none'; // Hide the years that are not 2025
            }
        });
    }, 100);
}

This approach should help you achieve the desired functionality. Try it and see if it will work for your case.

Regards,
Vasko
Progress Telerik

[Bob]

Hi Vasko,

That was a great workaround. With that client event, I was able to hide other years. However the year 2025 button is rendered in the bottom of the popup. How can the year 2025 be rendered in the first row? Possible?

 

[Vasko]

Hi Bob,

You can manually append the cell with the current year to the first row by targeting it:

function onPopupOpening(sender, args) {
    setTimeout(() => {
        let pickerItems = document.querySelectorAll(".RadCalendarFastNavPopup td a");

        pickerItems.forEach((item) => {
            let itemText = item.innerHTML;
            let itemValue = parseInt(itemText);

            if (!isNaN(itemValue) && itemValue !== 2025) {
                item.parentElement.style.display = 'none'; // Hide the years that are not 2025
            }

            if (itemText === "2025") {
                let firstRow = item.parentElement.closest("tbody").querySelector("tr"); // Find the first row of the Picker
                firstRow.appendChild(item.parentElement);
            }   
        });
    }, 10);
}

Regards,
Author nickname
Progress Telerik

[Bob]

Brilliant! Appreciated your help!

 

Thanks,

Bob