CODEWITHSUNDEEP
jquery-uijqgridjquery-ui-datepicker
user1447718
user1447718

Reputation: 681

jqgrid and datepicker control giving error for new records

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.

Upvotes: 0

Views: 1889

Answers (1)

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 1

Related Questions