Bootstrap Datetimepicker Display

Question

I am trying to implement a bootstrap datetimepicker. Right now I have it working alright but when I try to navigate months, the month names overlap on each other, like so:

https://i.sstatic.net/8xztE.png

Here is the code I am using:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>TEST</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.min.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/lang/en-gb.js"></script>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-lg-3">
        <div class="form-group">
          <div class='input-group date' id='datetimepicker1'>
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
            </span>
            <input type='text' class="form-control" placeholder="Date & Time" />
          </div>
        </div>
        <script type="text/javascript">
          $(function () { $('#datetimepicker1').datetimepicker();});
        </script>
      </div><!-- /.col-lg-3 -->
    </div><!-- /.row -->      
  </div>

</body>
</html>

It is probably worth noting that all of the stylesheets and scripts are the most up to date version, except for the second to last script, which has a version 3.1.3 available, but for some reason when I use this version, the datetimepicker doesn't work at all.

Also, how can I make it so that when the user clicks on the text field (as well as the glyph icon) the date picker appears? Right now it only works if the user clicks on the glyph icon, not the text field.

why are you calling the bootstrap-datepicker.min.js twice? try removing the extra datetimepicker.min.js call. also check this fiddle jsfiddle.net/Lwkanjpx — Sushil
– Sushil, Commented Jul 7, 2015 at 22:02
I removed the extra call. It still has the problem. That fiddle has the same exact problem! Maybe its something with my browser settings? — Infamous911
– Infamous911, Commented Jul 7, 2015 at 22:19
try checking your code in another browser. this should work unless you're calling some other code or css? — Sushil
– Sushil, Commented Jul 7, 2015 at 22:28

Stiliyan · Accepted Answer · 2015-07-07 23:43:49Z

4

To show the datetimepicker when the user interacts with the input field, set its allowInputToggle property to true when you first initialize the datetimepicker:

$('#datetimepicker1').datetimepicker({
    allowInputToggle: true
});

answered Jul 7, 2015 at 23:43

Stiliyan

1,1742 gold badges9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mateutek · Accepted Answer · 2015-07-07 22:26:38Z

1

Ok so there were few problems.Mixing datepicker with datetimepicker was the main i guess. You should setup locale like this

$(function () { 
    $('#datetimepicker1').datetimepicker({
        locale:'en'
    });
});

This fiddle worked ok http://jsfiddle.net/yr6a5xr8/ check the External resources

answered Jul 7, 2015 at 22:26

Mateutek

1848 bronze badges

Collectives™ on Stack Overflow

Bootstrap Datetimepicker Display

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related