Changing a Form element after onChange event but before Save

I am using this code to change a Date field before saving a Form which is bound to a Grid:

Form.attachEvent("onChange",function(id,value,checked) { if(value instanceof Date) { var d = new Date(value); var stdDate = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate(); Form.setItemValue(id,stdDate); } Form.save(); } } );

The field shows as changed on the Form, but the value sent to the Grid remains unchanged.

The code below reproduces the issue:

[code]

DHTMLX v4.1 Calendar Control on Form bound to Grid html,body { width: 100%; height: 100%; margin: 0; }

DHTMLX v4.1 Calendar Control on Form bound to Grid

Demo to show how Calendar control when bound to a Grid sends date in wrong format

REF: Link to Forum Topic

Click on the first row of the Grid so that it is selected. The Form will display the date values.
Then click on the 'date1' field in the Form. The Calendar popup will show.
Select a date, and then click 'Save'.
The Grid will show a date something like this: 'Sat Dec 06 2014 00:00:00 GMT+0000 (GMT)'.
Now, click on the first row again, and observe the form: it will display 'Invalid Date'.


Double-Click on the 'date 3 (calendar)' cell of the first row. The Calendar popup will show in the grid.
Select a date in the Calendar control - the Form will show the date in Y-m-d format.
[/code]

Could you clarify your question, please?

The Calendar control generates a date in the wrong format, so I want to change the format before the data is entered into the Grid. I am using the onChange event to do this - by changing the form input element value - but it doesn’t seem to work.

Eureka! I have found that this change to the code makes it work as I expected:

Form.setItemValue(id,"'"+stdDate+"'");

The grid now receives the date in the correct format, and the database update succeeds.

So the complete code snippet now looks like this:

Form.attachEvent("onChange",function(id,value,checked){ if(value instanceof Date) { var d = new Date(value); var stdDate = d.getFullYear()+'-'+(d.getMonth()+1).pad()+'-'+d.getDate().pad(); Form.setItemValue(id,"'"+stdDate+"'"); } Form.save(); });

NB: I also had to pad the day and month with leading zeros, using an extension to the Number object:

Number.prototype.pad = function(size) { var s = String(this); while (s.length < (size || 2)) {s = "0" + s;} return s; }