Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Time Spinner (gallery-timespinner) on cdn

Last Updated: 03/3/11

+ 0 -

Dave Winders

YUI Contributor

Created: 10/14/10
Last CDN Push: 12/1/10
Build Tag: gallery-2010.12.01-21-32
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

What is the 'timespinner'? It is a configurable time selector along the lines of 'Stephen Woods TimePicker'. Hours, minutes, seconds can be selected and incremented based on 12 or 24 hour formats. There is also the ability to have a time span (start and end time). The 'timepicker' returns from a getValue call which returns a string of the time inputted by the user.

Feel free to add to it or let me know any issues, improvements, suggestions etc.

Time Spinner Config.

var timespinner = new Y.TimeSpinner{...

hourtype:'12', ('hourtype' is either 12 or 24 hr format.)
separator:':', ('separator' the separator to be used in between hh:mm:ss.)
seconds:true, ('seconds' true or false as wether or not seconds in ss format are required.)
timepsan:{required:true,sep:' - '}, ('timepsan' true or false and the spearator to be used. If true there will be two time clocks displayed spearated by the 'sep' value)
holder:'#...' (the id of the element to where the time spinner will be drawn.)

The value of the time spinner is gotten by calling 'timespinner.getValue();'

CSS is found in the style /gallery-timespinner.css

Code Sample

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.12.01-21-32'
}).use('gallery-timespinner', function(Y) {
//Example 1 (Time Spinner in 12 hour clock format with seconds)
    var timespinner = new Y.TimeSpinner({
        hourtype:'12',
        separator:':',
        seconds:true,
        timepsan:{required:false,sep:' - '},
        holder:'#boxd'
    });
    timespinner.render();
    timespinner.focus();
 
//To get the value of the time spinner call the function 'timespinner.getValue();'
//Assume a button id  = button
var foo = Y.one("#button");
//Attach a click event to foo, that calls ,getValue and alerts the result.
Y.on("click", function(){var ts0 = timespinner.getValue(); alert(ts0);} ,foo);
 
 
//Example 2  (Time Spinner in 24 hour clock format without seconds, using a time span (start time - end time))
    var timespinner2 = new Y.TimeSpinner({
        hourtype:'24',
        separator:':',
        seconds:false,
        timepsan:{required:true,sep:' - '},
        holder:'#boxd2'
    });
    timespinner2.render();
    timespinner2.focus();
 
//To get the value of the time spinner call the function 'timespinner.getValue();'
//Assume a button id  = button2
var foo = Y.one("#button2");
//Attach a click event to foo, that calls ,getValue and alerts the result.
Y.on("click", function(){var ts2 = timespinner2.getValue(); alert(ts2);} ,foo);
 
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.12.01-21-32'
}).use('gallery-timespinner', function(Y) {
//Example 1 (Time Spinner in 12 hour clock format with seconds)
    var timespinner = new Y.TimeSpinner({
        hourtype:'12',
        separator:':',
        seconds:true,
        timepsan:{required:false,sep:' - '},
        holder:'#boxd'
    });
    timespinner.render();
    timespinner.focus();

//To get the value of the time spinner call the function 'timespinner.getValue();'
//Assume a button id  = button
var foo = Y.one("#button");
//Attach a click event to foo, that calls ,getValue and alerts the result.
Y.on("click", function(){var ts0 = timespinner.getValue(); alert(ts0);} ,foo);

//Example 2  (Time Spinner in 24 hour clock format without seconds, using a time span (start time - end time))
    var timespinner2 = new Y.TimeSpinner({
        hourtype:'24',
        separator:':',
        seconds:false,
        timepsan:{required:true,sep:' - '},
        holder:'#boxd2'
    });
    timespinner2.render();
    timespinner2.focus();

//To get the value of the time spinner call the function 'timespinner.getValue();'
//Assume a button id  = button2
var foo = Y.one("#button2");
//Attach a click event to foo, that calls ,getValue and alerts the result.
Y.on("click", function(){var ts2 = timespinner2.getValue(); alert(ts2);} ,foo);

});

Forum Posts

No forum posts for this module.