CODEWITHSUNDEEP
javascriptbootstrap-datetimepicker
Jc John
Jc John

Reputation: 1859

Can't change the format of Bootstrap DateTimePicker

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'
        });
    });    
});

Upvotes: 0

Views: 2546

Answers (3)

VincenzoC
VincenzoC

Reputation: 31482

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>

Upvotes: 0

Marprin
Marprin

Reputation: 196

In your jQuery code, it uses a datepicker class but you are not using it correctly. You should use it like below

<div class="col-sm-6">
    <div class="input-group date 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>

Anyway, you do not have to use the same format in your database as you can update the date on your backend code with the proper database format later.

Upvotes: 0

DecoderReloaded
DecoderReloaded

Reputation: 514

  $('.datetimepicker').datetimepicker({
    timepicker: false,
    format: 'Y-m-d',
    closeOnDateSelect: true,
    scrollInput: false
  });

Upvotes: 2

Related Questions