Display Calendar right below the input

SoftwareDveloper 0
Viewed 25

I have an html page that references bootstrap's datetimepicker. The calendar is displayed at the bottom of the page when the input is clicked. How do I display it right below the input field?

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Demo</title>     
        <!-- datetime picker -->
        <!-- Include Bootstrap CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"        rel="stylesheet">
    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
    <!-- Include Moment.js CDN -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
 
    <!-- Include Bootstrap DateTimePicker CDN -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    </head>
    <body>
    <div style="margin:100px">
        <div style="margin-bottom: 3em;">
            <div style="float:left; margin-right: 5em;">
                <label id="startDateTimeLabel">Start DateTime</label>
                <input class="form-control"
                type="text" id="startDateTime" style="width:200px"/>
            </div>
            
            <div>
                <label id="endTimeLabel">End DateTime</label>
                <input class="form-control"
                type="text" id="endDateTime" style="width:200px"/>
            </div>
        </div>
</div>
    <script>
    $("#startDateTime").datetimepicker({
                format: 'MM/DD/YYYY HH:mm:ss',
                defaultDate: new Date(),                 
            });
            $("#endDateTime").datetimepicker({
                format: 'MM/DD/YYYY HH:mm:ss',
                defaultDate: new Date(),
            });
    </script>
</body>
</html>

Any help is appreciated.

datetimepicker bootstrap-4 html
1 Answers

You should wrap the datetimepicker into a relative position div:

<div style="position: relative;">
    <div style="float:left; margin-right: 5em;">
        <label id="startDateTimeLabel">Start DateTime</label>
        <input class="form-control" type="text" id="startDateTime" style="width:200px"/>
    </div>
</div>
    
<div style="position: relative;">
    <div style="float:left; margin-right: 5em;">
        <label id="endTimeLabel">End DateTime</label>
        <input class="form-control" type="text" id="endDateTime" style="width:200px"/>
    </div>
</div>
nourhomsi0
Related