The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
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
<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);
});
No forum posts for this module.
All code on this site is licensed under the BSD License unless stated otherwise.