How to avoid seconds in datetimepicker?

6.2k views Asked by At

I want to avoid seconds in datepicker dropdown.
I have the following html content:

<link href="<c:url value='/resources/css/bootstrap-datetimepicker.min.css'/>"
              rel="stylesheet">
<script type="text/javascript"
                src="<c:url value='/resources/js/bootstrap-datetimepicker.min.js'/>"></script>
...    
    <div id="startTimeDiv" class="input-append right-date-input">
            <input id="startTime" name="startTime" data-format="hh:mm:ss" type="text" value="">
                        <span class="add-on">
                            <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
                        </span>
    </div>

and the following js:

$('#startTimeDiv').datetimepicker({
      pickDate: false,
      timeFormat:  "HH:mm"
});

startTimeDiv looks like this:

enter image description here

Thus seconds didn't disappear. Why ?

P.S.
I tried to reproduce it from scratch on isolated example and it works correctly. I suppose that it can be problem with another libraries interaction or different version I used on isolated example. I don't how to check datepicker version I use.

4

There are 4 answers

2
Swapnull On

where are you getting #startTimeDiv from? should it not be #startTime, that may solve your issues :)

0
Josh Stevens On

your id is startTime not startTimeDiv

fix it by doing this

$('#startTime').datetimepicker({
      pickDate: false,
      timeFormat:  "HH:mm"
});
0
gstackoverflow On

For my version works the following code:

$('#startTimeDiv').datetimepicker({
      pickDate: false,
      pickSeconds: false
});
0
user2001627 On

I have the below in my code and it works. This will default the seconds to 00 but wont show in the pop-up for the user to select the seconds. Using jquery time picker add-on

$('#startTimeDiv').datetimepicker({
      showSecond: false
});

Or if you simply dont want the seconds itself then try this

$('#startTimeDiv').datetimepicker({
    showSecond: false,
    timeFormat: 'hh:mm'
// hourFormat: 24 (if you are looking for 24 hr format, if you want 12 hr format then change timeFormat to 'hh:mm TT' and hourFormat:12)
    });