jQuery-Timesetter

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

Authors blog:

http://sandunangelo.blogspot.com/2018/09/jquery-timesetter-plugin.html