CODEWITHSUNDEEP
jqueryhtmlcssbootstrap-datetimepickereonasdan-datetimepicker
coder1456
coder1456

Reputation: 181

Bootstrap Datetimepicker not displaying properly

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

Upvotes: 0

Views: 7102

Answers (1)

VincenzoC
VincenzoC

Reputation: 31502

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>

Upvotes: 0

Related Questions