Skip to content

saw/YUI-3-Timepicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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 : ':'
                        }
                    }
                };

About

A plugin that replicates the cool jquery picker by Maxime Haineault

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published