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!
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With