How to display only years in RadDatePicker Or RadDateTimePicker or RadMonthYearPicker

[Du]

Hi everybody,
I want display only years in RadDatePicker or RadDateTimePicker or RadMonthYearPicker same Image attach, please check image and help me
Thanks,

[Angel Petrov]

Hi,

I am sorry to say but with the current implementation of the controls the functionality illustrated can not be achieved. For now you can only display months and years using the RadMonthYearPicker.

Regards,
Angel Petrov
Telerik

[Lee]

I came across this post as I required the same, only showing and selecting year.
You can use the following to achieve the desired effect.  Sizes and widths will be different for each skin, I was using the default skin.

<style type="text/css">

    div.RadCalendarFastNavPopup {
        width: 105px !important;
        overflow: hidden;
    }

    table.RadCalendarMonthView_Default {
        width: 210px !important;
        margin-left: -105px;
    }

    table.RadCalendarMonthView_Default tr:nth-child(7) td.rcButtons
    {
        text-align: right !important;
    }

    .rcOkButton {
        margin-left: 20px;
    }
</style>

<telerik:RadMonthYearPicker ID="RadYearSelection" runat="server" Width="100px">
    <DateInput DateFormat="yyyy" DisplayDateFormat="yyyy">        
    </DateInput>
</telerik:RadMonthYearPicker>

[Angel Petrov]

Hi Lee,

It looks like I have misunderstood the initial requirement for which I apologize.

Thank you for sharing your solution with the community. I hope that others can benefit from it and follow the illustrated approach to achieve the desired effect.

Regards,
Angel Petrov
Telerik

 

 

[Manoj]

Simple and Effective Solution.
 <style type="text/css">  
        #rcMView_Jan,
        #rcMView_Feb,
        #rcMView_Mar,
        #rcMView_Apr,
        #rcMView_May,
        #rcMView_Jun,
        #rcMView_Jul,
        #rcMView_Aug,
        #rcMView_Sep,
        #rcMView_Oct,
        #rcMView_Nov,
        #rcMView_Dec {
            display:none;
        }

    </style>

[Manoj]

Simple and Effective Solution.
 <style type="text/css">  
        #rcMView_Jan,
        #rcMView_Feb,
        #rcMView_Mar,
        #rcMView_Apr,
        #rcMView_May,
        #rcMView_Jun,
        #rcMView_Jul,
        #rcMView_Aug,
        #rcMView_Sep,
        #rcMView_Oct,
        #rcMView_Nov,
        #rcMView_Dec {
            display:none;
        }

    </style> 


<telerik:RadMonthYearPicker Skin="Metro" ID="RadMonthYearPicker1" runat="server">
                <DateInput runat="server" DateFormat="yyyy" DisplayDateFormat="yyyy">
                </DateInput>
            </telerik:RadMonthYearPicker>

[Javier]

Thanks guys,

 

That css Save my day