MonthYear Picker - Show Year Only

[Antonio]

 

Hi guys,

 

I'm using 2 MonthYearPickers on a page and need that one of them to show only the year.

 

How can i do this? Tryed the css solution with #rcMView_month but that changes for both controls.

 

Thanks,

Antonio

 

[DAVY]

Hi,

You can find my answer below

Regards,

Davy

ARCNET.NC

[Eyup]

Hello Antonio,

You can use the DateFormat and DisplayDateFormat properties to achieve this requirement:

<telerik:RadMonthYearPicker ID="RadMonthYearPicker1" runat="server" SelectedDate="2016/5/5">
    <DateInput runat="server" DateFormat="yyyy"></DateInput>
</telerik:RadMonthYearPicker>

I hope this will prove helpful.

Regards,
Eyup
Telerik by Progress

[Ana]

Hi,

I'm facing the same issue. Your suggestion didn't solve it.

The most I could get was to hide all months except the current one using a css definition and the MonthCellsStyle property:

<style type="text/css">
  .hide
  {
    display: none !important;
  }
</style>

 

<MonthCellsStyle CssClass="hide" />

 

Do you know how can I get rid of this current month at the MonthYear picker?

 

Thank you.

[Eyup]

Hi Ana,

Could you send us sample screenshots or video demonstrating the exact desired appearance? Thus, we will be able to figure out your specific requirement and suggest a more accurate solution.

Regards,
Eyup
Telerik by Progress

[Ana]

Hi,

Of course. I'm attaching two images. Both belong to the same web application page.

The first one is the MonthYear picker that behaves as expected, because the requirement is to be able to choose a month and an year.

The second one is the MonthYear picker that don't behaves as expected, because as I explained at my post, I want to show only years, but it is displaying the current month also.

Hope this helps you understand my problem. Thanks.

Ana

[Eyup]

Hi Ana,

You can achieve this requirement using the following approach:

<telerik:RadMonthYearPicker ID="RadMonthYearPicker1" runat="server" MonthCellsStyle-CssClass="monthCellClass">
</telerik:RadMonthYearPicker>

CSS:

<style>
    .monthCellClass {
        display: none;
    }

    .rcSelected {
        display: none;
    }

        .rcSelected ~ .rcSelected {
            display: table-cell;
        }
</style>

That should do the trick.

Regards,
Eyup
Telerik by Progress

[M Kumar]

hi sir,

             i use the above code posted on 11 -10-20216 that one we have facing the problem when we selected the year is hide  and click ok that year show in textbox. below example i show in screenshot.

[M Kumar]

hi sir,
             i use the above code posted on 11 -10-20216 that one we have facing the problem when we selected the year is hide  and click ok that year show in textbox. below example i show in screenshot.

 

the enable.png i put only one 

.monthCellClass {
        display: none;
    }

but it show month also 

the disable.png  i put both 

     .monthCellClass {
        display: none;
    }
 
   .rcSelected {
        display:none;
    }

 

it dose not show month but select year is not show that i mark in red box.

 

Note: I need to show only year not month.

[DAVY]

Hi,

You can add a ViewCellCreated event and add this code in it :

if ( e.Cell.CellType == Tel>erik.Web.UI.Calendar.MonthYearViewCellType.MonthCell ) e.Cell.Style.Add("display", "none");