Fork me on GitHub

Example: Basic time creation

How to create a time field.

Basic TimeField creation

Use the following code to create a basic inputEx TimeField.

Change separators

Use the separators attribute from CombineField to change the separator strings.

Gap in selector's value

change the value of your selectors by setting an increment

Show/Hide selectors

Let say that your second's selector in too specific .

HTML

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('inputex-time',function(Y) {

    // Example 1
    var field = new Y.inputEx.TimeField({
        parentEl: 'container1', 
        value:'15:17:34'
    });
    var button = Y.inputEx.cn('button', null, null, 'getValue');
    Y.one(button).on('click',function() {
        alert(field.getValue());
    });
    Y.one('#container1').appendChild(button);
    
    //Example 2
    var field2 = new Y.inputEx.TimeField({
        parentEl: 'container2',
        separators: [false,"h","m","s"],
        value:'15:17:34'
    });
    
    // Example 3
    var field3 = new Y.inputEx.TimeField({
        parentEl: 'container3',
        gapHours : 2,
        gapMinutes : 3,
        gapSeconds : 4,
        // showHours : false,
        // showMinutes : false,
        // showSeconds : false,
        separators: [false, "h", "m", "s"],
        value: '16:17:34'
    });

    // Example 4
    var field4 = new Y.inputEx.TimeField({
        parentEl: 'container4',
        gapHours : 3,
        gapMinutes : 7,
        // showHours : false,
        // showMinutes : false,
        showSeconds : false,
        separators: [false, "h", "m", "s"],
        value: '15:17:34'
    });

});