rtl datepicker：日期选择器显示中的问题

Question

我使用的是阿拉伯语日期选择器，到目前为止代码工作正常，但是当尝试显示日期选择器时，日期选择器右侧会出现一个大的白色 space。为了更好地理解这里是代码

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.ar.min.js"></script>

</head>
<body>

     
        <div class="form-group col-md-6">
          <label for="inputPassword4">                beginning date
        </label>
          <input type="text" class="form-control"  id="beginning_date" name="beginning_date">
        </div>

        <div class="form-group col-md-6">
          <label for="inputEmail4">                ending date
        </label>
          <input type="text" class="form-control"  id="ending_date" name="ending_date">
        </div>
      
<script type="text/javascript">
$(function () {
    
$('#beginning_date').datepicker({
      language: 'ar'})
    
$('#ending_date').datepicker({
      language: 'ar'})
});
</script>
</body>
</html>

尽管使用相同的输入宽度，但使用法语日期选择器时不会出现此问题

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>

</head>
<body>

       
        <div class="form-group col-md-6">
          <label for="inputPassword4">                beginning date
        </label>
          <input type="text" class="form-control"  id="beginning_date" name="beginning_date">
        </div>

        <div class="form-group col-md-6">
          <label for="inputEmail4">                ending date
        </label>
          <input type="text" class="form-control"  id="ending_date" name="ending_date">
        
      </div>
<script type="text/javascript">
$(function () {
    
$('#beginning_date').datepicker({
      language: 'fr'})
    
$('#ending_date').datepicker({
      language: 'fr'})
});
</script>
</body>
</html>

有什么解决办法吗？

Answer 1

尝试用一点点修复它css

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

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.ar.min.js"></script>

</head>
<body>

     
        <div class="form-group col-md-6">
          <label for="inputPassword4">                beginning date
        </label>
          <input type="text" class="form-control"  id="beginning_date" name="beginning_date">
        </div>

        <div class="form-group col-md-6">
          <label for="inputEmail4">                ending date
        </label>
          <input type="text" class="form-control"  id="ending_date" name="ending_date">
        </div>
      
<script type="text/javascript">
$(function () {
    
$('#beginning_date').datepicker({
      language: 'ar'})
    
$('#ending_date').datepicker({
      language: 'ar'})
});
</script>
</body>
</html>

Answer 2

重置right值并将其赋予left。

.datepicker-rtl {
  right: unset !important;
  left: 15px !important;
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.ar.min.js"></script>

</head>

<body>


  <div class="form-group col-md-6">
    <label for="inputPassword4">                beginning date
        </label>
    <input type="text" class="form-control" id="beginning_date" name="beginning_date">
  </div>

  <div class="form-group col-md-6">
    <label for="inputEmail4">                ending date
        </label>
    <input type="text" class="form-control" id="ending_date" name="ending_date">
  </div>

  <script type="text/javascript">
    $(function() {

      $('#beginning_date').datepicker({
        language: 'ar'
      })

      $('#ending_date').datepicker({
        language: 'ar'
      })
    });
  </script>
</body>

</html>

rtl datepicker：日期选择器显示中的问题

rtl datepicker : problem in the datepicker display

html

css

datepicker

twitter-bootstrap