inputEx - DatePickerField Usage

Basic DatePickerField creation

Use the following code to create a basic inputEx DatePickerField.

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

Change DatePickerField date format

Use the following code to select another date format

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

DatePickerField Updated event

Listening for the updated event

			var datepicker = new Y.inputEx.DatePickerField({parentEl: 'container3', value: new Date(), dateFormat: 'd/m/Y'});
			datepicker.on('updated', function(value) {
				Y.one('#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 Y.inputEx.DatePickerField({parentEl: 'container4', value: new Date(), valueFormat: 'Y-m-d', value: '2009-01-01'});
			datepicker2.on('updated', function(value) {
				Y.one('#container4').appendChild( inputEx.cn('div',null,null, value) );
			});

Disable DatePicker

Disable method

			var f = new Y.inputEx.DatePickerField({parentEl: 'container5'});
			
			var exampleDiv = Y.one('#container5');
			
			var button1 = inputEx.cn('button', null, null, 'disable()');
			exampleDiv.appendChild(button1); 
			Y.one(button1).on('click', function() { f.disable(); });

			var button2 = inputEx.cn('button', null, null, 'enable()');
			exampleDiv.appendChild(button2); 
			Y.one(button2).on('click', function() { f.enable(); });

Disable readonly option

If you want to let users enter the date manually

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