Changing Bootstrap Datepicker position doesn't work

Question

I have these datepickers and I want to move the position of each one to the right of each input instead of being in the left. I tried so many css solutions but nothing seems to work.

<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 dir="rtl" 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 dir="rtl" 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>

use the orientation option https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#orientation — Temani Afif, Jul 26 '20 at 08:25

doğukan · Accepted Answer · 2020-07-26T08:41:31.203

Just use orientation: 'right'

<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 dir="rtl" 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 dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">

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

      $('#beginning_date').datepicker({
        language: 'fr',
        orientation: 'right'
      })

      $('#ending_date').datepicker({
        language: 'fr',
        orientation: 'right'
      })
    });
  </script>
</body>

</html>

We can use oreientation: 'top right' for show the datepicker on top the input instead of the bottom.

<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 dir="rtl" 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 dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">

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

      $('#beginning_date').datepicker({
        language: 'fr',
        orientation: 'top right'
      })

      $('#ending_date').datepicker({
        language: 'fr',
        orientation: 'top right'
      })
    });
  </script>
</body>

</html>

it works on stackoverflow snippet but try copying the same exact code in notepad on your pc it won't work on both inputs — , Jul 26 '20 at 08:22
there is no difference between so snippet and local server. did you published your site? — doğukan, Jul 26 '20 at 08:23
try it yourself you'll see ! copy the same code in notepad ++ with the css that you suggested and run it ! it won't work on both inputs because stackoverflow snippet showed the first input above the second but they are actualy in the same horizontal line ! just try on local and you'll see — , Jul 26 '20 at 08:27

score 0 · Answer 2 · answered Jul 26 '20 at 08:24

0

Change left property value for the div.datepicker element to auto, and set right property value to the previous value of left property.

div.datepicker {
  left: auto;
  right: 15px;
}

answered Jul 26 '20 at 08:24

Maciej Bledkowski

604
9
26

Changing Bootstrap Datepicker position doesn't work

2 Answers2