Search code examples
bootstrap-datetimepickereonasdan-datetimepicker

Bootstrap datetimepicker v4.x 12hr time not working

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>
Solution

  • 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: