Calendar Control not behaving as expected: Form bound Grid

This problem which seems to be similar to [url][/url]

I have a Form containing a date field, bound to a Grid. The underlying database is MysSQL, and the date field is bound to a column which has data type ‘DATE’. MySQL expects the date to be like 2014-12-23. If the Form field is a plain INPUT box, the date can be entered in the MySQL format yyyy-mm-dd and it works, but if the From control is Calendar, the update fails. When the Calendar control is used, the date appears correctly in the Form, but is not accepted by the database.

The Form is rendered using JSON, and the code snippet for the Calendar control looks like this:

{type: "calendar",id: "date_test", name: "date_test",label: "String (MY SQL VARCHAR)",inputWidth: 300 , dateFormat: "%Y-%m-%d", serverDateFormat: "%Y-%m-%d",  style: "background: url(dhtmlx/imgs/calendar.png) right no-repeat;padding-left: 17px;",  calendarPosition: "right", skin: "dhx_web", position: "label-right"}

I created a plain text field to see what is happening; looking at this, it seems that the date is being formatted like this:

Tue Dec 23 2014 00:00:00 GMT+0000 (GMT)

instead of


Am I doing something wrong here?

Could you provide a direct link ot completed demo on to inspect it? (or open ticket in support system) … pport.html

I have emailed a standalone demo.

The script below will reproduce this behaviour. The full 4.1 Standard suite should be in a directory (dhtmlxSuite_v41_std) at one level above the folder holding the script.


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.

Did you find your solution and describe in this post?

Yes - I used this code to alter the date format after the onChange event, but before the save() action:

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+"'"); }; });