0

I have been trying to get the datetimepicker of bootstrap v4.17.47 working to no avail. When I set the format, I get only a 24 hour and minute, I can't seem to get a 12 hour time to work.

Is there something else that needs to be setup? I'm sing bootstrap v3.3.2, and jQuery v2.2.3.

<div class="form-group">
    <div class='input-group date' id='TheTime'>
        <input type='text' class="form-control" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
        </span>
    </div>
</div>

Below the JavaScript I set, but I don't get a popup that is 12 hours. With the below set, I get a popup that goes to 24 hours, but what appears in the time text box, is for example: pop-up says 21:00, but the text box shows 9:00 tt.

<script type="text/javascript">
    $(document).ready(function ($) {
        $('#TheTime').datetimepicker({
            format: 'hh:mm tt'
        });                        
    });
</script>
VincenzoC
  • 30,117
  • 12
  • 90
  • 112
user1161137
  • 1,067
  • 1
  • 11
  • 31

1 Answers1

0

You have to change the value of the format option to get a 12 hours popup, simply add an a, that as the linked moment docs states represents the am / pm string.

Here a working example:

$(document).ready(function ($) {
    $('#TheTime').datetimepicker({
        format: 'hh:mm a'
    });                        
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

<div class="form-group">
    <div class='input-group date' id='TheTime'>
        <input type='text' class="form-control" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
        </span>
    </div>
</div>

If you have to display the tt text in your input field, take a look here:

VincenzoC
  • 30,117
  • 12
  • 90
  • 112