Menu
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.
465
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
});
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
44
answered Feb 05 '26 07:02
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With