RTL RadCalendar

2 posts, 0 answers
  1. Alok
    Alok avatar
    39 posts
    Member since:
    Feb 2009

    Posted 22 Feb 2015 Link to this post


    I used a radcalendar control, like

    Start Date : Text Box [calender picker] to  End Date : Text Box [calender picker]
    [label] : [text box] [calender control] [label] : [text box] [calender control]

    In RTL direction, by default it is like:
    [calender picker]  Text Box : Start Date  to [calender picker]  Text Box : End Date
    [calender control] [text box] : [label]  to [calender control] [text box] : [label]

    Basically, the RadCalendar reverses the item order and aligns itself to the right side of the container.
    Is there a way to change the direction of the labels, text box and radcalendar control like :

    End Date : Text Box [calender picker] to Start Date : Text Box [calender picker] 
    [label] : [text box] [calender control] to [label] : [text box] [calender control]

    Please suggest.

  2. Radoslav
    Radoslav avatar
    1566 posts

    Posted 25 Feb 2015 Link to this post

    Hi Alok,

    The desired functionality will not be truly RTL, because in RTL mode the user starts reading the screen from right to left and the Start Date: label needs to be on the right side. To achieve the truly RTL you can use following markup:
    <div dir="rtl">
              <telerik:RadDatePicker SelectedDate="1/1/2000" DateInput-Label="StartDate:" runat="server"></telerik:RadDatePicker>
              <telerik:RadDatePicker SelectedDate="2/2/2002" runat="server" DateInput-Label="EndDate:"></telerik:RadDatePicker>

    The desired functionality:
    End Date : Text Box [calender picker] to Start Date : Text Box [calender picker]  cannot be achieved with css and html elements only. In this case you need to have two different panels and show one of them depending on parent element's (or body) dir attribute.

    I hope this helps.


    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