Home

Demo

The easiest way to define settings is by using the new html5 attributes: min, max and step. Use partitial-time format for min and max. step is seconds between each suggested time.

The class time-mm-hh won’t affect the time format. It’s just what I use to style the input fields. The time will be of the format hh:mm until someone sends me a patch or I find other syntaxes useful.

<input type="time" name="myTime" class="time-mm-hh" min="9:00" max="18:00" step="1800" />
<script type="text/javascript">
$(document).ready(function(){
    // use settings from the input's attributes (from the html5 spec)
    // 30 min intervals
    $("input[name='myTime']").timeInput();
});
</script>

Also, try using the keyboard. You can even skip the ‘:’ if you’re lazy ;)

If you don’t feel brave enough to use html5 features yet, you can use the old type=“text” and define settings as an object literal:

<input type="text" name="myTime2" class="time-mm-hh" />
<script type="text/javascript">
$(document).ready(function(){
    // 15 min intervals from 6:00 am to 3:00 pm
    $("input[name='myTime2']").timeInput({min: "6:00", max: "15:00", step: 900});
});
</script>

Feel destructive? Try an invalid time, or a time between two steps.