bootstrap datepicker in RTL layout is not working properly

Question

bootstrap datepicker in RTL layout is not working properly, I'm using this bootstrap datepicker http://bootstrap-datepicker.readthedocs.io This is the code my code in page.cshtml

<div class="form-group" id="data_3">
  <label class="col-md-3 control-label">@Resources.ResourceLanguages.BirthDate</label>
  <div class="input-group date col-md-8" data-provide="datepicker">
    <div class="col-md-1"></div>
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span> @Html.TextBoxFor(m => m.BirthDate, "{0: dd/MM/yyyy}", new { @class = "form-control", type = "text", placeholder = @Resources.ResourceLanguages.BirthDate, ReadOnly = "" }) @Html.ValidationMessageFor(m
    => m.BirthDate)
  </div>
</div>

and this is my javascript code

$(document).ready(function() {
  $('#data_3 .input-group.date').datepicker({
    startView: 2,
    todayBtn: "linked",
    keyboardNavigation: false,
    forceParse: false,
    autoclose: true,
    orientation: "top left"
  });
});

This is the problem I get, I tried every solution in the internet, but nothing works, is there any solution for this problem? does bootstrap datepicker support the RTL layout?

Answer 1

add this style to the end of your style to overload the current style

.datepicker {
   direction: rtl;
}
.datepicker.dropdown-menu {
   right: initial;
}

or you can add this to the head of your layout

 <style>         
      .datepicker {
        direction: rtl;
      }             
    .datepicker.dropdown-menu {
right: initial;             
      }     
    </style>