RadMonthYearPicker without input field

[Eric]

Is there a way to disable, or rather replace the input field of a RadMonthYearPicker with a label? Or just show the image?

I'm trying to create a GridView that emulates a calendar since the functionality I need doesn't exist with the RadCalendar and I'd really like to emulate the way the RadCalendar uses the paged month/year label as the trigger to open the MonthYearPicker. Is there anyway I can accomplish that myself?

[Princy]

Hi Eric,

I suppose you want to disable/hide the input field of RadMonthYearPicker. Try the following approaches to disable/hide the input field of RadMonthYearPicker.

1) Try the following code snippet to disable the input field of RadMonthYearPicker.

JS:

<script type="text/javascript">
    function pageLoad()
    {
        $telerik.$('.riTextBox').attr("disabled", "disabled");
    }
</script>

2) Try the following CSS to hide the input field of RadMonthYearPicker.

CSS:

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

Hope this helps.

Thanks,
Princy.

[Eric]

It hides the input field, but doesn't remove the width associated with it. Please see the attached image. I believe it has to do with the following code:

<table cellspacing="0" class="rcTable rcSingle" style="width:100%;">
    <tr>
          <td class="rcInputCell" style="width:100%;">
                 <span id="ctl00_m_g_0db9cee1_c484_45e4_bffd_acdd7881b2ac_ctl00_RadMonthYearPicker1_dateInput_wrapper" class="riSingle RadInput RadInput_Metro" style="display:block;width:100%;">
                   <span class="riDisplay" id="ctl00_m_g_0db9cee1_c484_45e4_bffd_acdd7881b2ac_ctl00_RadMonthYearPicker1_dateInput_display" style="display:none;"></span>
                      <input id="ctl00_m_g_0db9cee1_c484_45e4_bffd_acdd7881b2ac_ctl00_RadMonthYearPicker1_dateInput" name="ctl00$m$g_0db9cee1_c484_45e4_bffd_acdd7881b2ac$ctl00$RadMonthYearPicker1$dateInput" type="text" class="riTextBox riEnabled" />
                        <input id="ctl00_m_g_0db9cee1_c484_45e4_bffd_acdd7881b2ac_ctl00_RadMonthYearPicker1_dateInput_ClientState" name="ctl00_m_g_0db9cee1_c484_45e4_bffd_acdd7881b2ac_ctl00_RadMonthYearPicker1_dateInput_ClientState" type="hidden" />
               </span>
         </td>

[Princy]

Hi Eric,

Try the following CSS.

CSS:

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

Hope this helps.

Regards,
Princy.

[Eric]

We're getting there, see attached image:

[Vasil]

Hello Eric,

You can inspect the elements in the browser to see which element sill has width and from what CSS these styles are coming. Then write custom CSS that to over-style them. It will be very hard for us to say what could be the problem, without having your page.

All the best,
Vasil
the Telerik team

[Eric]

Vasil, whatever I write-over the Telerik control keeps adding width: 100%.

However, I would much rather have the option to have the RadMonthYearPicker "pop-out" when a label is clicked, like how the RadCalendar works. Is that possible?

[Princy]

Hello Eric,

Try the following js to show popup on label click and hide the input filed using the CSS mentioned below.
CSS:

.RadPicker_Default .rcCalPopup, .RadPicker_Default .rcTimePopup
     {
         background-image:none !important;
     }
      .riTextBox
     {
         display:none !important;
     }
     table.RadCalendarMonthView_Default
     {
         margin-left:-180px !important;
     }
     .RadCalendarPopupShadows > .rcShadTR
     {
         right:15px !important;
     }

JS:

function showpopup()
 {
     var picker = $find('<%=MonthYearPicker1.ClientID %>');
     picker .showPopup(true);
 }

C#:

protected void Page_Load(object sender, EventArgs e)
 {
    Label1.Attributes.Add("onClick", "showpopup();"); //to attach click event on label
 }

Thanks,
Princy.

[Vasil]

Hi Eric,

The control refresh it's width on hover/focus/blur/disable/enable, however if you use CSS selector with higher specificity of these coming from the skin, you still will override the width.

If you like to make it like the month year picker in the Calendar, you could use RadCalendar in our page and hide its rcMain table. This way you will see only the header and will be able to click on the date to select month.

Regards,
Vasil
the Telerik team