Question

83

How to add seconds to Bootstrap date time picker

rated 0 times [ 85] [ 2] / answers: 1 / hits: 18671 / 7 Years ago, thu, may 18, 2017, 12:00:00

I am using the Bootstrap datatimepicker (https://eonasdan.github.io/bootstrap-datetimepicker/). It's great but it does not show or let the user select seconds.

$(document).ready(function () {

    $('#datetimepicker1').datetimepicker({defaultDate: new Date()});

});





<div class='input-group date' id='datetimepicker1'>

    <input type='text' class=form-control />

    <span class=input-group-addon>

        <span class=glyphicon glyphicon-calendar></span>

    </span>

</div>

So how to select seconds as well? And how to get seconds to show in the format? Currently it's 05/18/2017 1:26 PM, I want 05/18/2017 1:26:40 PM

In the dev guide, there is a fillSeconds() function but I am not sure how to apply it here.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janayr

Add To Favorites

Follow

Total Points: 80

Total Questions: 80

Total Answers: 114

Location: Venezuela

Member since Sat, Aug 22, 2020

4 Years ago

answered 7 Years ago alejandro · Accepted Answer

Setting the format to the correct value from moment and sideBySide:

$('#datetimepicker1').datetimepicker({

    defaultDate: new Date(),

    format: 'DD/MM/YYYY hh:mm:ss A',

    sideBySide: true

});

<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>

<script src=https://code.jquery.com/jquery-2.1.1.min.js></script>

<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js></script>

<link rel=stylesheet

  href=https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css>

<script src=https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js></script>



<div class=container>

    <div class=row>

        <div class='col-sm-6'>

            <div class=form-group>

                <div class='input-group date' id='datetimepicker1'>

                    <input type='text' class=form-control/>

                    <span class=input-group-addon>

                        <span class=glyphicon glyphicon-calendar></span>

                    </span>

                </div>

            </div>

        </div>

    </div>

</div>