javascript - bootstrap date picker position

I am using following sample code for date picker

<html>
<head>
<!--  jQuery -->
<script type="text/javascript" src=".11.3.min.js"></script>
<!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap -->
<link rel="stylesheet" href=".css" />

<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src=".4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href=".4.1/css/bootstrap-datepicker3.css"/>


</head>
<body>
<div class="bootstrap-iso">
    <div class="container-fluid">
    <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12">

    <!-- Form code begins -->
    <form method="post">
        <div class="form-group"> <!-- Date input 1-->
            <label class="control-label" for="date">Start Date</label>
            <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
        </div>
        <div class="form-group"> <!-- Date input 2-->
            <label class="control-label" for="date">End Date</label>
            <input class="form-control" id="date1" name="date1" placeholder="MM/DD/YYY" type="text"/>
        </div>
        <div class="form-group"> <!-- Submit button -->
            <button class="btn btn-primary " name="submit" type="submit">Submit</button>
        </div>
    </form>
 <!-- Form code ends --> 
    </div>
    </div>    
    </div>
    <script>
        $(document).ready(function(){
            var date_input=$('input[name="date"]'); //our date input has the name "date"
            var date_input1=$('input[name="date1"]'); //our date input has the name "date"
            var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
            var options={
                format: 'mm/dd/yyyy',
                container: container,
                todayHighlight: true,
                autoclose: true,
            };
            date_input.datepicker(options);
            date_input1.datepicker(options);
        })
    </script>
</div>
</body> 
</html>

The date picker for Start Date opens in correct position but for End Date the date picker open above the field. I want to open it below similar to first case. I guess the problem is with javascript and javascript is new new thing for me. How can I correct mistake?

I am using following sample code for date picker

<html>
<head>
<!--  jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />

<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>


</head>
<body>
<div class="bootstrap-iso">
    <div class="container-fluid">
    <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12">

    <!-- Form code begins -->
    <form method="post">
        <div class="form-group"> <!-- Date input 1-->
            <label class="control-label" for="date">Start Date</label>
            <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
        </div>
        <div class="form-group"> <!-- Date input 2-->
            <label class="control-label" for="date">End Date</label>
            <input class="form-control" id="date1" name="date1" placeholder="MM/DD/YYY" type="text"/>
        </div>
        <div class="form-group"> <!-- Submit button -->
            <button class="btn btn-primary " name="submit" type="submit">Submit</button>
        </div>
    </form>
 <!-- Form code ends --> 
    </div>
    </div>    
    </div>
    <script>
        $(document).ready(function(){
            var date_input=$('input[name="date"]'); //our date input has the name "date"
            var date_input1=$('input[name="date1"]'); //our date input has the name "date"
            var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
            var options={
                format: 'mm/dd/yyyy',
                container: container,
                todayHighlight: true,
                autoclose: true,
            };
            date_input.datepicker(options);
            date_input1.datepicker(options);
        })
    </script>
</div>
</body> 
</html>

Share Improve this question asked Jul 10, 2018 at 12:45 prattom 1,74311 gold badges43 silver badges69 bronze badges

1 add orientation: 'bottom' in your options variable – AB Udhay Commented Jul 10, 2018 at 12:52

Add a comment |

2 Answers 2

Sorted by: Reset to default 11

When using anything new in programming it's best to consult the documentation for the tool in question to discover what you can and can't do. In this case I did a google search for the bootstrap-datepicker and I found the docs here: Options Doc

after reading the docs you'll find there is a property called orientation you can set. Revising your options variable to the following should correct your issue:

var options={
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
            orientation: 'bottom'
        };

Let me know how that goes!

If you add orientation: 'top' to your options, it should work.

https://jsfiddle.net/L4t68rzx/1/

var options={
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
    orientation: 'top' 
};

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - bootstrap date picker position - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)