CODEWITHSUNDEEP
html
DSA
DSA

Reputation: 21

HTML Input type time 15 min interval

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">
       </div>
</div>

Upvotes: 2

Views: 6453

Answers (3)

Gurjinder Kaur
Gurjinder Kaur

Reputation: 19

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

Upvotes: 0

S N Sharma
S N Sharma

Reputation: 1526

$('.timepicker').timepicker({
    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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

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

Upvotes: 1

Matthias
Matthias

Reputation: 180

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


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

<script>
       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));
       }
</script>

Upvotes: 0

Related Questions