When using jqGrid for inline editing, a date column is defined in the colmodel with accompanying JavaScript code. However, it can be cumbersome to maintain and produces an unattractive result.
In instances where the browser supports it, how can one utilize the html5 native input type='date' for inline date editing instead of the existing code?
Below is the current colmodel:
{"template":DateTemplate
,"label":"Invoice date",
"name":"Invoicedate",
"index":"Invoicedate",
"editoptions":{
"dataInit":initDateWithButton
,"size":10
},
"searchoptions":{"dataInit":initDateWithButton
,"size":10,"attr":{"size":10}},"width":50
}
And the corresponding JavaScript:
var DateTemplate = {
sorttype: 'date', formatter: 'date',
formatoptions: {
srcformat: "Y-m-d"
},
editoptions: { maxlength: 10, size: 10, dataInit: initDateWithButton },
editable: true,
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
dataInit: initDateWithButton,
size: 11, // for the advanced searching dialog
attr: { size: 11 } // for the searching toolbar
}
};
var initDateWithButton = function (elem) {
... [omitted for brevity] ...
};
This pertains to an ASP.NET MVC4 application.
Update
Despite attempting the solution provided, there were still issues encountered.
The date template lacks newformat definition, leading to unresolved parsing issues. The suggested replacement line is:
$(elem).val($.jgrid.parseDate($.jgrid.formatter.date.newformat, orgValue, "Y-m-d"));
Subsequently, to address invalid date conversion to long format, the line was updated to $this.val($this.val());
- Upon completion of inline date editing, the ISO format remains displayed until the grid is refreshed, causing localized dates to not visually appear immediately.
** Update **
Issues regarding button visibility within columns widths vary across browsers like IE showing buttons while Chrome displays empty spaces. How can this inconsistency be resolved for uniform button visibility?