RadDatePicker showing Month and Year

8 posts, 1 answers
  1. Archana
    Archana avatar
    17 posts
    Member since:
    Jun 2011

    Posted 09 Aug 2013 Link to this post

    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.
  2. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 11 Aug 2013 Link to this post

     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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Archana
    Archana avatar
    17 posts
    Member since:
    Jun 2011

    Posted 12 Aug 2013 Link to this post

    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?
  5. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 12 Aug 2013 Link to this post

    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
  6. Archana
    Archana avatar
    17 posts
    Member since:
    Jun 2011

    Posted 13 Aug 2013 Link to this post

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

    Archana
  7. Answer
    A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 18 Aug 2013 Link to this post

    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

  8. Chris
    Chris avatar
    5 posts
    Member since:
    May 2014

    Posted 23 Jan 2015 in reply to Archana Link to this post

    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.
  9. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 27 Jan 2015 Link to this post

    Hello Chris,

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

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017