Setting current date in a form

[ajg3]

Relatively new here. I have looked through examples and have only seen stuff with a date picker but I am not looking for that. I am currently setting up a form but can't seem to get this part of it.


I have declared variables for the date as well.

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

I would like for the date field to be automatically populated with the current date and be locked. Any idea's?

items: [
        {
        xtype: 'fieldset',
        title: 'Details',
        items: [{
            xtype: 'textfield',
            name : 'fname',
            label: 'First Name',
			required: true
            },{
            xtype: 'textfield',
            name : 'lname',
            label: 'Last Name',
			required: true
            },{
            xtype: 'textfield',
            name : 'pnumber',
            label: 'Phone Number',
			required: true
            },{
            xtype: 'textfield',
            name : 'date',
            label: 'Date',
            }
]
}]

[AndreaCammarata]

Hi ajg3.
I suggest you to add two function to your application:

1. Function able to retrive the data in the right format

function getDate(){
    var currentTime = new Date();
    var month = addZero(currentTime.getMonth() + 1);
    var day = addZero(currentTime.getDate());
    var year = currentTime.getFullYear();
    return(day + "/" + month + "/" + year);
}

2. Support function to add zero to properly format the numbers

function addZero(num)
{
    (String(num).length < 2) ? num = String("0" + num) :  num = String(num);
    return num;        
}

Then edit your application code in this way:

items: [{
    xtype: 'fieldset',
    title: 'Details',
    items: [{
        xtype: 'textfield',
        name : 'fname',
        label: 'First Name',
        required: true
    },{
        xtype: 'textfield',
        name : 'lname',
        label: 'Last Name',
        required: true
    },{
        xtype: 'textfield',
        name : 'pnumber',
        label: 'Phone Number',
        required: true
    },{
        xtype: 'textfield',
        name : 'date',
        label: 'Date',
        value: getDate()
    }]
}]

Hope this Helps.

[ajg3]

Thanks for the response! I am having another issue though. I have been going through all the Intro videos and piecing my app together that way, since I am new to this. So i have the Viewport thing going. There is the app.js which launchs the Viewport.js. And from this Viewport i have my tabPanel and items with xtypes to a seperate card.

Here is my code of one of the cards where i want to call the function:

ToolbarDemo.views.Testcard = Ext.extend(Ext.form.FormPanel, {
	
	scroll: 'vertical',
	id: 'hform',
	
	items: [
        {
        xtype: 'fieldset',
        title: 'Details',
		
		defaults: {
			labelWidth: '35%'
		},
        items: [{
            xtype: 'textfield',
            name : 'fname',
            label: 'First Name',
			required: true
            },{
            xtype: 'textfield',
            name : 'lname',
            label: 'Last Name',
	    required: true
            },{
            xtype: 'textfield',
            name : 'pnumber',
            label: 'Phone Number',
	    required: true
            },{
            xtype: 'textfield',
            name : 'date',
            label: 'Date'
            }],
		},{
			layout: 'vbox',
			defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
			items: [{
       			text: 'Clear',
				scope: this,
				handler: function(){
					Ext.getCmp('hform').reset();
				}
        	},{
				xtype: 'button',
				text: 'Submit'
				}
			],
		},]
});

Ext.reg('testcard', ToolbarDemo.views.Testcard);

I am confused as to where i can put this function...i notice the handler function with the Clear button as far as adding a function there but no dice.

any help would be appreciated...and should i avoid using the Viewport style and instead create variables as panels?

[ikhanrahi]

Thanks man. it works