jQuery Timesetter plugin

jquery-timesetter is a jQuery plugin which generates a UI component useful to take user inputs or to display time values with hour and minutes in a friendly format. UI provide intuitive behaviors for better user experience such as validations in real-time and keyboard arrow key support.

Dependencies

·         jQuery 2.2.4

·         Bootstrap 3.3.7 CSS file

How to use

Simplest usage to start with you can use any HTML container element such as <div /> or <p />.

To apply timesetter capabilities you need to call .timesetter() on the HTML element as shown below.

$(".div1").timesetter();

Customize options

While there is a default set of options built in inside the plugin, you are free to customize them as you need as shown below.

var options = {

    hour: {

        value: 0,

        min: 0,

        max: 24,

        step: 1,

        symbol: "hrs"

    },

    minute: {

        value: 0,

        min: 0,

        max: 60,

        step: 15,

        symbol: "mins"

    },

    direction: "increment", // increment or decrement

    inputHourTextbox: null, // hour textbox

    inputMinuteTextbox: null, // minutes textbox

    postfixText: "", // text to display after the input fields

    numberPaddingChar: '0' // number left padding character ex: 00052

};

$(".div1").timesetter(options);

Set values

Below functions supports in setting values into the plugin of the element.

$(".div1").timesetter(options).setHour(17);

$(".div1").timesetter(options).setMinute(15);

$(".div2").timesetter().setValuesByTotalMinutes(175);

$(".div2").timesetter().setPostfixText();

Read input values

Below functions supports in reading values from the plugin of the element.

var defaultOptions = $(".div1").timesetter().getDefaultSettings();

var hours = $(".div1").timesetter().getHoursValue();

var minutes = $(".div1").timesetter().getMinutesValue();

var totalMinutes = $(".div1").timesetter().getTotalMinutes();

var postfixText = $(".div1").timesetter().getPostfixText();

Repository

https://github.com/sandunangelo/jquery-timesetter