Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A plugin that replicates the cool jquery picker by Maxime Haineault

branch: master
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 : ':'
                        }
                    }
                };
Something went wrong with that request. Please try again.