inputEx - DateField Usage

Basic DateField creation

Use the following code to create a basic inputEx DateField.

			new Y.inputEx.DateField({parentEl: 'container1', value: new Date(), showMsg: true});

Change date format

Set the formatDate to your localized date format ! Here is the french format :

			new Y.inputEx.DateField({dateFormat: 'd/m/Y', value: '27/03/2008', parentEl: 'container2', showMsg: true});

Updated event and return value

The DateField returns a javascript Date object instance :

			var exampleDiv = Y.one('#container3');
			var dateField = new Y.inputEx.DateField({value: new Date(),  parentEl: exampleDiv, showMsg: true, required:true, typeInvite:'m/d/Y'}); 
			dateField.on('updated', function(val) {
				exampleDiv.appendChild( inputEx.cn('div', null, null, val) ); 
			});

			var button1 = inputEx.cn('button', null, null, 'setValue()');
			exampleDiv.appendChild(button1); 
			Y.one(button1).on('click', function() { dateField.setValue("11/26/1980"); });

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

Use a string input/output formatting

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

			
			// Instantiate the date field
			var stringdateField = new Y.inputEx.DateField({value: new Date(),  parentEl: 'container4', showMsg: true, required:true, typeInvite:'m/d/Y', valueFormat: 'Y-m-d'}); 
			
			// Logger
			var exampleDiv = Y.one('#container4');
			stringdateField.on('updated', function(val) {
				exampleDiv.appendChild( inputEx.cn('div', null, null, val) ); 
			});

			// Set the value according to the valueFormat
			var button1 = inputEx.cn('button', null, null, 'setValue()');
			exampleDiv.appendChild(button1); 
			Y.one(button1).on('click', function() { stringdateField.setValue("1980-11-16"); });

			// The returned value will use the valueFormat too
			var button2 = inputEx.cn('button', null, null, 'getValue()');
			exampleDiv.appendChild(button2); 
			Y.one(button2).on('click', function() { alert(stringdateField.getValue()); });