0

I need to display the bootstrap datetimepicker for an input field. It's working but not displaying properly. The calender is displayed but I can't see the option to change time.

HTML code:

<div class="form-group">
  <p>Date of Birth <span>*</span></p>
  <input type="text" name="dob" id="dob" max="3000-12-31" value="2012-05-15 21:05" class="form-control input-sm" required/>
</div>

JavaScript Code:

$(document).ready(function() {
  $(function () {
    $('#dob').datetimepicker();
  });
});`

List of dependencies I've used:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

Here's the fiddle: JSfiddle

Here are pictures of the calendar drop down:

enter image description here enter image description here

coder1456
  • 181
  • 3
  • 11

1 Answers1

0

From the Installing section of the docs, the components requires:

  1. jQuery
  2. Moment.js
  3. Bootstrap.js (transition and collapse are required if you're not using the full Bootstrap)
  4. Bootstrap Datepicker script
  5. Bootstrap CSS
  6. Bootstrap Datepicker CSS

You are missing jQuery, momentjs and bootstrap.js in your fiddle.

Please note that:

  • You have to use the format option to tell the picker in which format the date should be formatted. You can use 'YYYY-MM-DD HH:mm'.

  • You will have the following error in the console:

    Uncaught Error: datetimepicker component should be placed within a non-static positioned container

    if you don't change your HTML structure, see docs for some examples.

  • You have to use data-date-*, if you want to initialize options of the picker via data attributes. You can use data-date-max-date to set maxDate option. See here for futher examples.

Here a working sample:

$('#dob').datetimepicker({
  format: 'YYYY-MM-DD HH:mm'
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="col-lg-12">
  <p>Date of Birth <span>*</span></p>
  <input type="text" name="dob" id="dob" data-date-max-date="3000-12-31" value="2012-05-15 21:05" class="form-control input-sm" required/>
</div>
VincenzoC
  • 30,117
  • 12
  • 90
  • 112
  • It's working but in my actual page the size of the calendar is not proper and getting cut at the bottom which has the time selection tab. Is there anyway i can set the size of the calendar dropdown manually? – coder1456 Jun 19 '17 at 14:33
  • @coder1456 yes you can customize datetimepicker appereance using CSS (e.g. add a rule for `div.bootstrap-datetimepicker-widget.dropdown-menu`), but this is a different issue/question :) – VincenzoC Jun 19 '17 at 14:47
  • I was able to change the width and height of the calendar dropdown but as you can see the time tab is out of the dropdown. I couldn't find anything in the documentation to change this. Please help. Thankyou :) – coder1456 Jun 19 '17 at 15:11
  • @coder1456 please provide a snippet or a fiddle showing your issue, it's hard to understand what is wrong in your environment from the screenshot. Try to get the difference between your code and my working snippet. – VincenzoC Jun 19 '17 at 15:27
  • Bootstrap CSS is missing in your fiddle, moreover you are importing the datetimepicker required libs in the wrong order. If you fix that (as shown in my snippet) it should work. – VincenzoC Jun 20 '17 at 07:20