I'm an RIA Developer who owns a motorcycle custom paint shop, who loves to race anything with wheels. I also enjoy woodworking, cooking, fine wines, liqueurs and dark beers. So if nothing else my blog should be eclectic.  
Apr 15 2008

Javascript Date Picker using YUI

Posted by Russell Brown at 6:18 AM
0 comments
- Categories: Development | YUI | JavaScript

In a recent project I had the need to have multiple objects tied a single date picker pop-up. What I was really going for was a DIV field to show the date so it was true read only and to stuff the value into a hidden text field as well.

I needed to use it in multiple places and it needed to be flexible for future uses, so I came up with this quick package YAHOO.EGPS.Utils.DatePicker. It allows you to choose multiple targets (for the resulted value) and multiple triggers that will make the date-picker "pop-up".

DatePicker.register(ActionItems(s), target(s), minDate, maxDate);

Download the Code Here (version 1.0)

Arg Required Data Type Description
actionElements True An array of Objects or (String) Object-Ids
Or a single Object or (String) Object-Id
Objects can either be a form element or div/span object
Clicking on these objects will fire display the pop-up
targets True An array of Objects or (String) Object-Ids
Or a single Object or (String) Object-Id
Objects can either be a form element or div/span object
The selected date value will populate these objects.
minDate False Date
Default = 1/1/2008
What is the earlies date that is allowed to be choosen
maxDate False Date
Default = 12/31/2020
What is the latest date that is allowed to be choosen


Example Usage
    var dp1;
    var dp2;
    function initDatePicker() {
        var DatePicker = new YAHOO.AMC.Utils.DatePicker();

        // Register the triggers and targets
        dp1 = DatePicker.register(
            ['editEventForm_fDate1','date1PickerImg'],
            [document.forms.editEventForm.date1, 'editEventForm_fDate1']
        );

        var validate = function(type, args, obj) {
            validate_dates(
                document.forms.editEventForm.date1,
                document.forms.editEventForm.date2,
                dp2
            );
        }

        // Subscribe to the selecteEvent event and run validation, not included in this example
        dp1.selectEvent.subscribe(validate);
    }
   
    // ADD the initDatePicker function to the onDOMReady
    YAHOO.util.Event.onDOMReady(initDatePicker);

Download the Code Here (version 1.0)

Comments

Write your comment




(it will not be displayed)








Categories

Monthly Archives

Tech Blogs I Read

Motorcycle Links