timesplitter.js

A jQuery plugin for simplifying time inputs.

Timesplitter was originally developed as a UI improvement to the text inputs generated by Django's TimeInput widgets, but it is useful anywhere you need an unobtrusive, degradable way to improve a time input. It is fully styleable using CSS and requires only the use of jQuery.

Features

If the input has a valid time value when timesplitter is assigned to it, that time will also be displayed in the timesplitter widget upon rendering.

A class of "timesplitter_error" is given to invalid fields once a user begins to interact with the widget.

If timesplitter is used on a text input with the "required" attribute set, the new form elements will also have the "required" attribute set on them.

Using timesplitter

• Requirements:

  jQuery (tested with 1.5.2+)

• Example HTML:

  <input type="text" class="time_input" value="12:30" />

• Example Validation CSS:

  .timesplitter_error { background: #ffd6d5; border: 1px solid #a00; }

• Example Plugin Import - to be placed after your jQuery import:

  <script src='js/timesplitter.js'></script>

• Example Javascript - to be placed in your $(document).ready:

  $(".time_input").timesplitter();