dir="rtl" in telerik:RadDatePicker

[Shay Grinstein]

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.

 

[Princy]

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.

[Shay Grinstein]

Thank you very much.

This approach works.