RadDatePicker showing Month and Year

[Archana]

Hi,

I have managed to show only month and year using RadDatePicker.

<telerik:RadDatePicker ID="radEndDatePicker" runat="server" Skin="Hay" Width="208px" AutoPostBack="true" OnSelectedDateChanged="radEndDatePicker_SelectedDateChanged">
                                            <DateInput ID="DateInput2" DateFormat="MMMM yyyy" runat="server" Enabled="true">
                                            </DateInput>
                                            <Calendar ID="Calendar2" runat="server">
                                                <FastNavigationSettings TodayButtonCaption="Current Month" OkButtonCaption="     OK    "/>
                                            </Calendar>
                                            <ClientEvents OnDateSelected="OnEndDateSelected" />
                                        </telerik:RadDatePicker>

Please help on following items:
1. I need a way to rearrange the months.
Currently months are rendered as shown in the attachment here. But I need to order months to be shown as :
Jan         Jul
Feb        Aug
Mar        Sep
Apr        Oct
May       Nov
Jun        Dec

I tried Orientation property of Calender but it didnt work.

2. I need to hide backward and forward buttons shown for year.
3. All three buttons showing Current Month, OK and Cancel are different, how can I adjust the height to make it all look aligned?
Please help asap.

Thanks.

[A2H]

 Hello,

Please use the below code to achieve your 2nd and 3rd Requirement

protected void RadMonthYearPicker1_ViewCellCreated(object sender, MonthYearViewCellCreatedEventArgs e)
    {
        RadMonthYearPicker1.MonthCellsStyle.BorderColor = System.Drawing.Color.FromArgb(255, 190, 60);

        if (e.Cell.CellType == MonthYearViewCellType.NavigationCell)
        {
            //To hide backward and forward buttons shown for year.
            e.Cell.Style["display"] = "none";
        }
        if (e.Cell.CellType == MonthYearViewCellType.ButtonCell)
        {
            //To Adjust the Height and Width of buttons
            Button btnToday = (e.Cell.Controls[0] as Button);
            btnToday.Text = "Current Month";
            btnToday.Style["width"] = "100px";
            btnToday.Style["height"] = "30px";
            Button btnOk = (e.Cell.Controls[1] as Button);
            btnOk.Style["width"] = "50px";
            btnOk.Style["height"] = "30px";
            Button btnCancel = (e.Cell.Controls[2] as Button);
            btnCancel.Style["width"] = "50px";
            btnCancel.Style["height"] = "30px";
        }
    }

PS: Adjust the pixel size according to your requirement    .

For some reason I am not able to reply to your second post, Hence updating this.
For Date picker control Please use the below css styles

<style type="text/css">

        .RadCalendarMonthView_Hay #rcMView_Today
        {
            height: 30px;
        }

        .RadCalendarMonthView_Hay #rcMView_OK
        {
            height: 30px;
        }

        .RadCalendarMonthView_Hay #rcMView_Cancel
        {
            height: 30px;
        }
        .RadCalendarMonthView_Hay #rcMView_PrevY
        {
            display: none;
        }

        .RadCalendarMonthView_Hay #rcMView_NextY
        {
            display: none;
        }

    </style>

Thanks,
A2H

[Archana]

Thanks for the reply.
However as shown in the example code below I'm using RadDatePicker and not RadMonthYearPicker. It is not available in the telerik version(2009.2.826.35) that I'm using currently.
Can you please give sample code for RadDatePicker?

[A2H]

Hi,
I apologize for providing you wrong code
Please try the below css styles

<style type="text/css">


        .RadCalendarMonthView_Hay #rcMView_Today
        {
            height: 30px;
        }

        .RadCalendarMonthView_Hay #rcMView_OK
        {
            height: 30px;
        }

        .RadCalendarMonthView_Hay #rcMView_Cancel
        {
            height: 30px;
        }
        .RadCalendarMonthView_Hay #rcMView_PrevY
        {
            display: none;
        }

        .RadCalendarMonthView_Hay #rcMView_NextY
        {
            display: none;
        }

    </style>

Thanks,
A2H

[Archana]

Thanks for the reply.
It takes care of issues 2 and 3.
Can you please help with issue 1?

Archana

[A2H]

Hi,

Please try the below implementation
CSS:

<style type="text/css">

        .RadCalendarMonthView_Hay #rcMView_Today
        {
            height: 30px;
        }

        .RadCalendarMonthView_Hay #rcMView_OK
        {
            height: 30px;
        }

        .RadCalendarMonthView_Hay #rcMView_Cancel
        {
            height: 30px;
        }
        .RadCalendarMonthView_Hay #rcMView_PrevY, .RadCalendarMonthView_Hay #rcMView_NextY
        {
            display: none;
        }

        .RadCalendarMonthView_Hay #rcMView_Feb,
        .RadCalendarMonthView_Hay #rcMView_Apr,
        .RadCalendarMonthView_Hay #rcMView_Jun
        {
            border-right: 0px solid #959485 !important;
        }

        .RadCalendarMonthView_Hay #rcMView_Jul,
        .RadCalendarMonthView_Hay #rcMView_Aug,
        .RadCalendarMonthView_Hay #rcMView_Sep,
        .RadCalendarMonthView_Hay #rcMView_Oct,
        .RadCalendarMonthView_Hay #rcMView_Nov,
        .RadCalendarMonthView_Hay #rcMView_Dec
        {
            border-right: 1px solid #959485 !important;
        }
    </style>

Javascript:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
       <script type="text/javascript" language="javascript">
           function setCalendarTable(sender, eventArgs) {
               var picker = $find("<%= radEndDatePicker.ClientID %>");
               var calendar = picker.get_calendar();
               var fastNavigation = calendar._getFastNavigation();
               //Changing the Month Display Order
               fastNavigation.MonthNames[0] = "Jan";
               fastNavigation.MonthNames[1] = "Jul";
               fastNavigation.MonthNames[2] = "Feb";
               fastNavigation.MonthNames[3] = "Aug";
               fastNavigation.MonthNames[4] = "Mar";
               fastNavigation.MonthNames[5] = "Sep";
               fastNavigation.MonthNames[6] = "Apr";
               fastNavigation.MonthNames[7] = "Oct";
               fastNavigation.MonthNames[8] = "May";
               fastNavigation.MonthNames[9] = "Nov";
               fastNavigation.MonthNames[10] = "Jun";
               fastNavigation.MonthNames[11] = "Dec";

               $clearHandlers(picker.get_popupButton());
               picker.get_popupButton().href = "javascript:void(0);";
               $addHandler(picker.get_popupButton(), "click", function () {
                   var textbox = picker.get_textBox();
                   //adjust where to show the popup table
                   var x, y;
                   var adjustElement = textbox;
                   if (textbox.style.display == "none")
                       adjustElement = picker.get_popupImage();

                   var pos = picker.getElementPosition(adjustElement);
                   x = pos.x;
                   y = pos.y + adjustElement.offsetHeight;

                   var e = {
                       clientX: x,
                       clientY: y - document.documentElement.scrollTop
                   };
                   var date = picker.get_selectedDate();
                   if (date) {
                       var changedMonthNo = date.getChangedMonthNo();
                       var changeddate = new Date(date.getFullYear(), changedMonthNo, 1);
                       calendar.get_focusedDate()[0] = changeddate.getFullYear();
                       calendar.get_focusedDate()[1] = changeddate.getMonth() + 1;
                   }
                   $get(calendar._titleID).onclick(e);
                   return false;
               });

               fastNavigation.OnOK =
                   function () {
                       debugger;
                       var number = getSelectedMonthNumber(fastNavigation.SelectedMonthCell.innerText);
                       var date = new Date(fastNavigation.Year, number, 1);
                       picker.get_dateInput().set_selectedDate(date);
                       fastNavigation.Popup.Hide();
                   }


               fastNavigation.OnToday =
                   function () {
                       var date = new Date();
                       picker.get_dateInput().set_selectedDate(date);
                       fastNavigation.Popup.Hide();
                   }
           }


           //Adding new function Prototypes
           Date.prototype.getChangedMonthNo = function () {
               return this.changedmonthNo[this.getMonth()];
           };
           Date.prototype.changedmonthNo = [
                       0, 2, 4,
                       6, 8, 10,
                       1,3, 5,
                       7, 9, 11
                   ];


           function getSelectedMonthNumber(selectedMonthName) {
               if (selectedMonthName.replace(/^\s+|\s+$/g, '') == "Jan") {
                   MonthValue = 0;
               }
               else if (selectedMonthName.replace(/^\s+|\s+$/g, '') == "Feb") {
                   MonthValue = 1;
               }
               else if (selectedMonthName.replace(/^\s+|\s+$/g, '') == "Mar") {
                   MonthValue = 2;
               }
               else if (selectedMonthName.replace(/^\s+|\s+$/g, '') == "Apr") {
                   MonthValue = 3;
               }
               else if (selectedMonthName.replace(/^\s+|\s+$/g, '') == "May") {
                   MonthValue = 4;
               }
               else if (selectedMonthName.replace(/^\s+|\s+$/g, '') == "Jun") {
                   MonthValue = 5;
               }
               else if (selectedMonthName.replace(/^\s+|\s+$/g, '') == "Jul") {
                   MonthValue = 6;
               }
               else if (selectedMonthName.replace(/^\s+|\s+$/g, '') == "Aug") {
                   MonthValue = 7;
               }
               else if (selectedMonthName.replace(/^\s+|\s+$/g, '') == "Sep") {
                   MonthValue = 8;
               }
               else if (selectedMonthName.replace(/^\s+|\s+$/g, '') == "Oct") {
                   MonthValue = 9;
               }
               else if (selectedMonthName.replace(/^\s+|\s+$/g, '') == "Nov") {
                   MonthValue = 10;
               }
               else if (selectedMonthName.replace(/^\s+|\s+$/g, '') == "Dec") {
                   MonthValue = 11;
               }
               return MonthValue;
           }
       </script>
   </telerik:RadScriptBlock>

ASPX:

<table>
        <tr>
            <td>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <script type="text/javascript" language="javascript">
//                Ensure to call this function after the declaration of Script Manager
                    Sys.Application.add_load(setCalendarTable);
                </script>
                <telerik:RadDatePicker ID="radEndDatePicker" runat="server" Skin="Hay" Width="208px"
                    AutoPostBack="true">
                    <DateInput ID="DateInput1" DateFormat="MMMM yyyy" Width="208px" runat="server" Enabled="true">
                    </DateInput>
                    <Calendar ID="Calendar2" runat="server">
                        <FastNavigationSettings TodayButtonCaption="Current Month" OkButtonCaption="     OK    " />
                    </Calendar>
                </telerik:RadDatePicker>
            </td>
        </tr>
    </table>

Thanks,
A2H

[Chris]

I realize this is an old post, but I am attempting to do the same thing but cannot get the RadDatePicker to only show Month and Year as you have in the image. Any help would be greatly appreciated.

[Maria Ilieva]

Hello Chris,

In order to achieve the required functionality you can simply use RadMonthYearPicker for your application.

Regards,
Maria Ilieva
Telerik