javascript - Bootstrap Datetimepicker Display

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:

.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=".3.1/css/datepicker.min.css">
  <link rel="stylesheet" href=".4.0/js/bootstrap-datepicker.min.js">
  <link rel="stylesheet" href=".3.5/css/bootstrap.min.css">

  <script src=".11.3/jquery.min.js"></script>
  <script src=".1.1/js/bootstrap.min.js"></script>
  <script src=".js/2.5.1/moment.min.js"></script>
  <script src=".0.0/js/bootstrap-datetimepicker.min.js"></script>
  <script src=".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.

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/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./ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.min.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css">

  <script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://netdna.bootstrapcdn./bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script src="http://cdnjs.cloudflare./ajax/libs/moment.js/2.5.1/moment.min.js"></script>
  <script src="http://cdnjs.cloudflare./ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>
  <script src="http://cdnjs.cloudflare./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>

Share Improve this question edited Jul 23, 2015 at 14:26 Siguza 24.1k6 gold badges56 silver badges99 bronze badges asked Jul 7, 2015 at 21:54 Infamous911 1,5314 gold badges26 silver badges46 bronze badges

why are you calling the bootstrap-datepicker.min.js twice? try removing the extra datetimepicker.min.js call. also check this fiddle jsfiddle/Lwkanjpx – 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 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 Commented Jul 7, 2015 at 22:28

Add a ment |

2 Answers 2

Sorted by: Reset to default 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
});

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/yr6a5xr8/ check the External resources

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

javascript - Bootstrap Datetimepicker Display - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)