Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap datepicker: RTL is not working

I am using a Bootstrap datepicker for a web project. Here is the datepicker:

https://github.com/eternicode/bootstrap-datepicker

According to the documentation (at the page bottom of the above link), I should use rtl:true for RTL languages. I tried that, but it was not working. Basically, it has no effect. Here is my code.

<html>
    <head>
        <meta charset="utf-8" /> 

        <link rel="stylesheet" href="bootstrap.css" />
        <link rel="stylesheet" href="datepicker.css" />
        <script src="jquery-1.10.1.js"></script>
        <script src=bootstrap.js"></script>
        <script src="bootstrap-datepicker.js"></script>

    </head>

    <body>

        <input type="text" id="dp2">

        <script>
            $('#dp2').datepicker({
                rtl: true
            });
        </script>
    </body>
</html>

Note: adding locale-specific javascript or specifying a language as follows does not make RTL work based on my tests. It only changes the language strings, but not make content such as date numbers right-to-left.

<script type="text/javascript" src="bootstrap-datepicker.XX.js" charset="UTF-8"></script>

$('.datepicker').datepicker({
    language: 'XX' // as defined in bootstrap-datepicker.XX.js
});

Does anyone know what went wrong and the fix? Thanks!

like image 484
curious1 Avatar asked Aug 12 '13 14:08

curious1


2 Answers

if you didn't want to change the language and need to fix it, You can fix it by adding some code to your CSS file

.datepicker-dropdown {max-width: 300px;}
.datepicker {float: right}
.datepicker.dropdown-menu {right:auto}

Note: this code will overwrite the default one so, put it below the file to work

like image 161
vipmaa Avatar answered Sep 22 '22 18:09

vipmaa


I got it working after digging through the code. In order for RTL to work, you need to load a script such as the following:

<script type="text/javascript" src="bootstrap-datepicker.XX.js" charset="UTF-8"></script>

The loaded javascript must have something like this

$.fn.datepicker.dates['XX'] = {
.....
        rtl: true
    };

In addition, your javascript must have the following:

$('.datepicker').datepicker({ language: 'XX' })

It appears that rtl:true is not needed in the above as the documentation says.

Hope this helps someone else.

like image 44
curious1 Avatar answered Sep 22 '22 18:09

curious1