Can't change the format of Bootstrap DateTimePicker

Question

I want to make my DateTimePicker format to be yyyy-mm-dd because it is the format that I've inserted in my database.

Here is the markup:

<div class="col-sm-6">
   <div class="input-group date" data-provide="datepicker">
     <input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
       <div class="input-group-addon">
         <span class="glyphicon glyphicon-th"></span>
       </div>
    </div>
</div>

And here is the code I wrote to change the format, but it doesn't work:

$(document).ready(function() {    
    $(function () {        
        $('.datepicker').datetimepicker({
            format: 'YYYY-MM-DD'
        });
    });    
});

Answer 1

The problem is your jQuery selector, you should use $('[data-provide="datepicker"]') instead of $('.datepicker') or add a datepicker class to your input.

Here a working example:

$('[data-provide="datepicker"]').datetimepicker({
  format: 'YYYY-MM-DD'
});

<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.37/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.17.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.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="col-sm-6">
   <div class="input-group date" data-provide="datepicker">
     <input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
       <div class="input-group-addon">
         <span class="glyphicon glyphicon-th"></span>
       </div>
    </div>
</div>