This is a migrated thread and some comments may be shown as answers.

dir="rtl" in telerik:RadDatePicker

2 Answers 57 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Shay Grinstein
Top achievements
Rank 1
Shay Grinstein asked on 29 Aug 2010, 04:09 PM
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 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 30 Aug 2010, 01:04 PM
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.
0
Shay Grinstein
Top achievements
Rank 1
answered on 30 Aug 2010, 04:33 PM
Thank you very much.

This approach works.

Tags
Calendar
Asked by
Shay Grinstein
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Shay Grinstein
Top achievements
Rank 1
Share this question
or