# inputEx - DatePickerField Usage

## Basic DatePickerField creation

Use the following code to create a basic inputEx DatePickerField.

new inputEx.DatePickerField({parentEl: 'container1'});

## Change DatePickerField date format

Use the following code to select another date format

new inputEx.DatePickerField({parentEl: 'container2', value: new Date(1984,0,6), dateFormat: 'd/m/Y'});

## DatePickerField Updated event

Listening for the updatedEvt

var datepicker = new inputEx.DatePickerField({parentEl: 'container3', value: new Date(), dateFormat: 'd/m/Y'}); datepicker.updatedEvt.subscribe( function(e,params) { var value = params[0]; YAHOO.util.Dom.get('container3').appendChild( inputEx.cn('div',null,null, value) ); });

## Use a string input/output formatting

The setValue/getValue methods will parse/format the dates to the valueFormat option.

var datepicker2 = new inputEx.DatePickerField({parentEl: 'container4', value: new Date(), valueFormat: 'Y-m-d', value: '2009-01-01'}); datepicker2.updatedEvt.subscribe( function(e,params) { var value = params[0]; YAHOO.util.Dom.get('container4').appendChild( inputEx.cn('div',null,null, value) ); });

## Disable DatePicker

Disable method

var f = new inputEx.DatePickerField({parentEl: 'container5'}); var exampleDiv = YAHOO.util.Dom.get('container5'); var button1 = inputEx.cn('button', null, null, 'disable()'); exampleDiv.appendChild(button1); YAHOO.util.Event.addListener(button1, 'click', function() { f.disable(); }); var button2 = inputEx.cn('button', null, null, 'enable()'); exampleDiv.appendChild(button2); YAHOO.util.Event.addListener(button2, 'click', function() { f.enable(); });

## Disable readonly option

If you want to let users enter the date manually

new inputEx.DatePickerField({parentEl: 'container6', readonly: false, showMsg: true});