Solution 1 :

    timeFormat: 'h:mm p',
    interval: 15,
    minTime: '09:00',
    maxTime: '6:00pm',
    defaultTime: '11',
    startTime: '09:00',
    dynamic: false,
    dropdown: true,
    scrollbar: true
<script src=""></script>
<link rel="stylesheet" href="//">
<script src="//"></script>

<input type="text" class="timepicker">

Solution 2 :

This is not exactly the same type of input box but it works kind of similarly:

<select id="hourbox"></select>
<select id="minutebox"></select>

       function makenew(value1, value2) {
              var option = document.createElement('option');
              option.text = value2;
              option.value = value1;
              return option;

       var hourSelectionBox = document.getElementById('hourbox');
       for(var j = 1; j <= 12; j++){
              hourSelectionBox.add(makenew(j, j));

       var minutesSelectionBox = document.getElementById('minutebox');
       for(var j = 0; j < 60; j += 15) {
              minutesSelectionBox.add(makenew(j, j));

Solution 3 :

input type=”time” does not work in Mozilla , you can use jquery timepicker plugin

Problem :

I am looking at having an input [type=”time”] What I want is minutes to only show 15 min intervals. So 00, 15, 30 and 45.

<div class="form-group">
    <label>Start time</label>
        <div class="form-group">
          <input type="time" name="start_time" min="09:00" max="18:00"                     step="00:15" required class="form-control">


Comment posted by Matthias

did you see my answer?

Comment posted by Matthias

@S N Sharma you should try to provide all the possible times as the user has not specified a time period.