CODEWITHSUNDEEP
jquerytwitter-bootstrap-3
ZeroZek
ZeroZek

Reputation: 319

Bootstrap datetimepicker not opening separately

When I select and choose first date input, second date input will open calendar on same position as first one. It looks like both dates are selected from one calendar. How to reach that calendars would open on each date input separately?

Current:

enter image description here

What I want:

enter image description here

HTML:

<form id="filter"> 
  <table class="vms">
    <tr>
      <td><input class="form-control" id="datetimepicker1"></td>
      <td><input class="form-control" id="datetimepicker2"></td>
    </tr>
  </table>
</form>

jQuery:

$('#datetimepicker1').datetimepicker({ format:'YYYY-MM-DD HH:mm', maxDate: $.now(), stepping: 5})
$('#datetimepicker2').datetimepicker({ format:'YYYY-MM-DD HH:mm', maxDate: $.now(), stepping: 5})

Datetimepicker that I'm using: https://eonasdan.github.io/bootstrap-datetimepicker/

Upvotes: 1

Views: 434

Answers (2)

Kalaiselvan
Kalaiselvan

Reputation: 2134

here is a working example it may be helpful to you

$(function () {
        $('#datetimepicker6').datetimepicker();
        $('#datetimepicker7').datetimepicker({
            useCurrent: false //Important! See issue #1075
        });
        $("#datetimepicker6").on("dp.change", function (e) {
            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker7").on("dp.change", function (e) {
            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="container">
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker6'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker7'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>

Upvotes: 3

Sorix
Sorix

Reputation: 918

Try doing something like this:

<div class="container">
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker6'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker7'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>

This is insired by Linked Pickers in the doc

Upvotes: 1

Related Questions