Home

Demo

GitHub suddenly doesn’t allow me to include the scripts in the wiki anymore, so moved demo page to my (highly unstable) server:
http://gregers.no/timeInputDemo.html

Boring text-examples:

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.

<input type="time" name="myTime" 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>

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