Bootstrap 日期时间选择器定位

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

I think there is no 'pickerPosition: "bottom-left"' option for Bootstrap Datetime Picker.

http://eonasdan.github.io/bootstrap-datetimepicker/Options/

May be it is causing the problems.

Answer 2

There is no datetimepicker component files in your html reference codes. You should have added js and css files.

First download the scripts from the component website here or clone from git:

$ git clone git://github.com/smalot/bootstrap-datetimepicker.git

And add references in the head section:

Sources:

<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>

HTML:

<div class="form-group">
            <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
            <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                <input class="form-control" size="16" type="text" value="" readonly>
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
            <input type="hidden" id="dtp_input2" value="" /><br/>
        </div>

Answer 3

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>

Answer 4

There is no option for older version of Bootstrap Datetime Picker. But you can change the positioning by applying CSS to the dropdown picker.

.bootstrap-datetimepicker-widget.dropdown-menu {
    inset: auto!important;
}

Here is the docs for more details : https://bootstrap-datepicker.readthedocs.io/