A plugin that replicates the cool jquery picker by Maxime Haineault
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README
demo.html
timepicker.css
timepickerwidget.js

README

About The Timepicker

This is based on the very slick time picker by Maxime Haineault. Its a YUI 3 widget and currently requires YUI 3 GA

Useage

Create a form...
                <form>

                    <label for="time">Time: </label><input type="text" name="time" value="2:45AM" id="time">
                    <div id ="cb" >
                    </div>

                    <p><input type="submit" value="Continue &rarr;" /></p>

                </form>
            
And write your script...
                YUI().use('timepicker', function(Y){
                //instantiate and identify the contentBox
                var picker = new Y.Saw.Timepicker({contentBox: '#cb'});
                picker.render();
                
                //hide
                picker.hide();
                
                //show
                picker.show();
                
                //set am or pm with class constants
                picker.set('time.ampm', picker.AM);
                
                //subscribe to events to do cool stuff:
                picker.subscribe('timechange', function(data){
                    //fires when the time changes
                    
                    //put the 12 hour string into the input. s24hour is also available
                    Y.get('#time').set('value' ,data.s12hour);
                    
                    //the data object also has members for hour, minute, ampm. Ampm is
                    //an int identified by picker.AM or picker.PM
                });

                picker.subscribe('cellclick', function(e){
                    //fires when a cell is clicked.
                   this.hide(); 
                },picker);
            });
            
Available configuration properties. (sorry for the lack of formatting, in a hurry right now)
                Timepicker.ATTRS = {
                
                    delay:{
                        value:15
                    },

                    time:{
                        value:{
                            hour:0,
                            minute:0,
                            ampm:AM
                        }
                    },

                    strings: {
                        value: {
                            am : "AM",
                            pm : "PM",
                            seperator : ':'
                        }
                    }
                };