jqgrid and datepicker control giving error for new records - jquery-ui

Question

i binded by jqgrid with json returned from ajax. json has date in following format
11/1/2013 12:00:00 AM
in the colmodel i have specified the following
{ name: 'datecol', index: 'SignDate', width: '200', jsonmap: 'cell.SignDate', editable: true, sorttype: 'date',
editable: true, formatter: 'date', formatoptions: {
srcformat: 'm-d-Y H:i:s',
newformat: 'Y-M-d'
},
editoptions: { dataInit: initDateEdit },
initDateEdit = function(elem) {
setTimeout(function() {
$(elem).datepicker({
formatter: 'date', formatoptions: {
srcformat: 'm-d-Y H:i:s',
newformat: 'yy-M-d'
}
autoSize: true,
showOn: 'button', // it dosn't work in searching dialog
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
//$(elem).focus();
},100);
}
This displays the date correctly in the grid as
2013-Nov-01
but when i hit addnew record, the popup comes and when i select the date and hit submit, in the grid, the new record is showing
NaN-undefined-NaN
in the date column. what is wrong here?
when I use the same code as given in this link
http://www.ok-soft-gmbh.com/jqGrid/LocalFormEditing.htm
edit works fine, but when i add new row, the date comes as NaN-undefined-NaN
please help.

Answer 1

I think that the reason of the problem which you described is wrong parameters of jQuery UI Datepicker which you use. You use formatter and formatoptions parameters of datepicker which not exists. Instead of that you should use dateFormat option which format described here.
UPDATED: The main reason of the problem which you describe is wrong date format which you use. It's important to understand that srcformat and newformat of formatoptions should have PHP date format, but jQuery UI Datepicker supports another format which described here for example. The input data 11/1/2013 12:00:00 AM contains both date and time. On the other side jQuery UI Datepicker support date only. Because you use newformat: 'yy-M-d' then I suppose that you want just ignore the time part of the date. In the case I would suggest you to use
formatter: 'date',
formatoptions: {
srcformat: 'm/d/Y',
newformat: 'Y-m-d'
}
instead of
formatter: 'date',
formatoptions: {
srcformat: 'm-d-Y H:i:s',
newformat: 'Y-m-d'
}
which you use currently. Next problem is the dateFormat option of jQuery UI Datepicker. You have to use format which corresponds srcformat, but which uses correct format (described here). In case of srcformat: 'm/d/Y' you should use dateFormat: 'm/d/yy' instead of dateFormat: 'yy-m-dd' which you use in your jsfiddle demo.
The modified demo works now correctly.