Bootstrap datetime picker positioning

Question

I added datetime picker plugin in my code. It works but not positioning rightly. When I focused on the input it's showed in footer of page not near the input. What should I check for?

 $(".form-date").datetimepicker({
   format: "dd.mm.yyyy",
   minView: 2,
   maxView: 4,
   autoclose: true,
   language: 'tr',
   pickerPosition: "bottom-left"
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="form-group row">
  <label for="Tarih" class="col-md-3 control-label">Tarih</label>
  <div class="col-md-9 input-append date form-date">
    <input type="text" class="form-control" name="Tarih" id="Tarih" value="" placeholder="Tarih">
    <span class="add-on"><i class="icon-th"></i></span>
  </div>
</div>

Answer 1

Aside from missing some of the required assets (datetimepicker, moment, etc) in your shared snippet, you are using deprecated options which prevent datepicker from displaying.

You can find current options here.

List of required assets here.

Update to the following:

• format: 'dd.MM.YYYY'
• min & maxView are gone but you can check viewMode on the options link (no min-max option though).
• autoclose to keepOpen (although it's set to false by default, so no need)
• language to locale: 'tr'
• pickerPosition to widgetPositioning {horizontal: 'left', vertical: 'bottom'} object.

Working Snippet:

$('.form-date').datetimepicker({
  format: 'dd.MM.YYYY',
  locale: 'tr',
  widgetPositioning: {
    horizontal: 'left',
    vertical: 'bottom'
  }
});

<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

<div class="container">
  <div class="form-group row">
    <label for="Tarih" class="col-md-3 control-label">Tarih</label>
    <div class='input-group date form-date col-md-9 input-append'>
      <input type='text' class="form-control" placeholder="Tarih" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>