Completed
Last Updated: 15 Dec 2025 14:48 by ADMIN
Release 2026 Q1 (Feb)
Dan Avni
Created on: 05 Aug 2019 16:57
Category: DatePicker
Type: Bug Report
0
Date/Time Pickers with RTL accessibility, picker button not displayed accordingly.

Hi,

For the date picker and it's family of controls (time picker, date time picker), when using bootstrap skin, lightweight rendering and RTL page, the buttons for the picker are displayed on the wrong side of the control (the right side) instead of being displayed on the left side. I know this can be fixed using some CSS but although the html controls are in order (text and then button both in a container with RTL), the button is stuck to the right side somehow

please advise

2 comments
ADMIN
Rumen
Posted on: 15 Dec 2025 14:48

Hi Dan,

The bug will be addressed in the next official release, either in a service pack in January or in the official 2026 Q1 release scheduled for February. Please remember to remove the workaround after upgrading your application.

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources
ADMIN
Attila Antal
Posted on: 05 Aug 2019 17:03

Thank you for taking the time reporting this issue.

The date and time pickers have only partial support for the RTL accessibility mode which is not the expected behavior. This bug will be reviewed and eventually get fixed.

Until a fix is provided, the following example CSS could provide a viable workaround. This overrides the appearance for the Bootstrap Skin and styles the picker to have its button on the left instead.

<style type="text/css">
    body {
        font-size: 14px;
    }
 
    .RadPicker_Bootstrap .RadInputRTL .riTextBox {
        padding-right: unset;
        float: right;
        padding-left: 2.286em;
    }
 
     .RadPicker_Bootstrap .RadInputRTL .rcSelect {
        right: unset;
        left: 1px;
         
    }
 
    .RadPicker_Bootstrap .RadInputRTL .rcSelect {
        border-radius: 4px 0 0 4px;
    }
 
    .RadPicker_Bootstrap .RadInputRTL .rcSelect .rcCalPopup {
        border-left-width: unset;
        border-left-style: unset;
        border-right-width: 1px;
        border-right-style: solid;
    }
</style>

 

Please accept our apology for any inconvenience this may have caused.