A jQuery plugin for simplifying time inputs.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
js
README.md
timesplitter_demo.html

README.md

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();