CODEWITHSUNDEEP
twitter-bootstrapdatepicker
curious1
curious1

Reputation: 14717

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!

Upvotes: 5

Views: 12612

Answers (5)

vipmaa
vipmaa

Reputation: 1122

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

Upvotes: 7

Flowra
Flowra

Reputation: 1418

I solve this problem by adding those lines in the Site.css file:

  /*To display datepicker in RTL*/
.datepicker-dropdown {
    max-width: 300px;
}

.datepicker {
    float: right
}

.datepicker.dropdown-menu {
        right: auto
    }

and also edit rtl = true in the bootstrap-datepicker.js file.

Upvotes: 0

Ashraf Maher
Ashraf Maher

Reputation: 81

Add this custom style and make sure it is loaded after the bootstrap

.datepicker {
   float: right
}
.datepicker.dropdown-menu {
   right:auto
}

Note: if you found that the dropdown is too far the input field, try to make the input field's width small.

Upvotes: 0

Bashir Noori
Bashir Noori

Reputation: 679

Also add this CSS to prevent from extra large size on RTL screen.

.datepicker-dropdown {max-width: 300px;}

Upvotes: 2

curious1
curious1

Reputation: 14717

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.

Upvotes: 6

Related Questions