dir="rtl" in telerik:RadDatePicker

3 posts, 0 answers
  1. Shay Grinstein
    Shay Grinstein avatar
    8 posts
    Member since:
    Jan 2010

    Posted 29 Aug 2010 Link to this post

    Hello,

    I'm trying to change view the date columns in telerik:RadDatePicker date popup to be right-to-left.
    When I wrap telerik:RadCalendar in a div with dir="rtl" it works but it doesn't work for telerik:RadDatePicker.
     
    How can I acheive this behaviour?

    The code that works for telerik:RadCalendar :

     

    <div dir="rtl">

     

     

    <telerik:RadCalendar ID="RadCalendar1" runat="server" Width="235px"

     

     

    Height="144px" Skin="Web20" CultureInfo="Hebrew (Israel)"

     

     

    ondayrender="RadCalendar1_DayRender" AutoPostBack="true"

     

     

    onselectionchanged="RadCalendar1_SelectionChanged"

     

     

    EnableMultiSelect="False" ShowOtherMonthsDays="False" ShowRowHeaders="False"

     

     

    UseColumnHeadersAsSelectors="False" onprerender="RadCalendar1_PreRender">

     

     

    </telerik:RadCalendar>

     

     

    </div>

     



    The code that doesn't work for telerik:RadDatePicker :

     

    <div dir="rtl">

     

     

    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Width="258px"

     

     

    Skin="Web20" MinDate="1900-01-01" PopupDirection="BottomRight">

     

     

    <Calendar RangeMinDate="01/01/1900 00:00:00" runat="server"

     

     

    ViewSelectorText="x" Skin="Web20" CultureInfo="Hebrew (Israel)" EnableMultiSelect="False" ShowOtherMonthsDays="False" ShowRowHeaders="False"

     

     

    UseColumnHeadersAsSelectors="False"></Calendar>

     

     

    <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>

     

     

    <DateInput DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy" runat="server" Culture="Hebrew (Israel)"></DateInput>

     

     

    </telerik:RadDatePicker>
    </
    div>


    Thanks,
    Shay.

     

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Aug 2010 Link to this post

    Hello,


    Try the following approach to set the direction.

    aspx:
    <telerik:RadDatePicker CssClass="rtlSupport" ID="RadDatePicker1" runat="server" Width="258px"
        Skin="Web20" MinDate="1900-01-01" PopupDirection="BottomRight">
        <Calendar CssClass="rtlSupport" RangeMinDate="01/01/1900 00:00:00" runat="server"
            ViewSelectorText="x" Skin="Web20" CultureInfo="Hebrew (Israel)" EnableMultiSelect="False"
            ShowOtherMonthsDays="False" ShowRowHeaders="False" UseColumnHeadersAsSelectors="False">
        </Calendar>
         <DateInput DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy" runat="server"
            Culture="Hebrew (Israel)">
        </DateInput>
    </telerik:RadDatePicker>


    Style:
    <style type="text/css">
        .rtlSupport
        {
            direction: rtl !important;
        }
    </style>


    Thanks,
    Princy.
  3. Shay Grinstein
    Shay Grinstein avatar
    8 posts
    Member since:
    Jan 2010

    Posted 30 Aug 2010 Link to this post

    Thank you very much.

    This approach works.

Back to Top