javascript - Bootstrap Datetimepicker Display - Stack Overflow

I am trying to implement a bootstrap datetimepicker. Right now I have it working alright but when I try

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>

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.

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 Infamous911Infamous911 1,5314 gold badges26 silver badges46 bronze badges 3
  • 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

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

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745176426a4615214.html

相关推荐

  • javascript - Bootstrap Datetimepicker Display - Stack Overflow

    I am trying to implement a bootstrap datetimepicker. Right now I have it working alright but when I try

    4小时前
    40

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信