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);