Native html date picker using code from How to use input type='date' for date column in jqGrid is used for date field editing in free jqgrid. Saving row using toolbar date buttons corrupts date value.
Steps to reproduce:
Observed: 29.03.2037 date appears.
Expected: Date should keep its value, 31.10.2007
How to fix this ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>https://stackoverflow.com/q/26040738/315935</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="author" content="Oleg Kiriljuk"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script type="text/javascript">
//<![CDATA[
/*global $,Modernizr */
/*jslint browser: true, unparam: true */
$(function () {
"use strict";
var mydata = [
{ id: "10", invdate: "", name: "test1", note: "note1", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "20", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "30", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "40", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "50", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }
],
$grid = $("#list"),
initDateEdit = function (elem, options) {
// we need get the value before changing the type
var orgValue = $(elem).val(), newformat,
cm = $(this).jqGrid("getColProp", options.name);
$(elem).attr("type", "date");
if ((Modernizr && !Modernizr.inputtypes.date) || $(elem).prop("type") !== "date") {
// if type="date" is not supported call jQuery UI datepicker
$(elem).css({ width: "8em" }).datepicker({
dateFormat: "d.m.Y",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
} else {
// convert date to ISO
if (orgValue !== "") {
//newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
// cm.formatoptions.newformat :
// $(this).jqGrid("getGridRes", "formatter.date.newformat");
newformat="d.m.Y";
$(elem).val($.jgrid.parseDate.call(this, newformat, orgValue, "Y-m-d"));
}
// "10em" is better for Chrome and "11em" for Opera 24
$(elem).css("width", /OPR/.test(navigator.userAgent) ? "11em" : "10em");
}
},
myBeforeSaveRow = function (options, rowid) {
var $self = $(this), $dates = $("#" + $.jgrid.jqID(rowid)).find("input[type=date]");
$dates.each(function () {
var $this = $(this), newformat, str,
id = $this.attr("id"),
colName = id.substr(rowid.length + 1),
cm = $self.jqGrid("getColProp", colName);
if ((Modernizr && Modernizr.inputtypes.date) || $this.prop("type") === "date") {
// convert from iso to newformat
str = $this.val();
if (str !== "") {
//newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
// cm.formatoptions.newformat :
// $self.jqGrid("getGridRes", "formatter.date.newformat");
newformat="d.m.Y";
str = $.jgrid.parseDate.call($self[0], "Y-m-d", str, newformat);
}
$this.attr("type", "text");
$this.val(str);
}
});
},
initDateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "mm/dd/yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true
});
}, 50);
},
numberTemplate = {formatter: "number", align: "right", sorttype: "number",
editrules: {number: true, required: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};
$grid.jqGrid({
datatype: "local",
//loadComplete: function() {
// $grid.jqGrid('setGridParam', { datatype: 'json' });
//},
data: mydata,
colNames: ["Client", "Date", "Closed", "Shipped via", "Notes", "Tax", "Amount", "Total"],
colModel: [
{ name: "name", align: "center", editable: true, width: 65, editrules: {required: true} },
{ name: "invdate", width: 125, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d.m.Y"}, editable: true,
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "closed", width: 70, align: "center", editable: true, formatter: "checkbox",
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
{ name: "ship_via", width: 105, align: "center", editable: true, formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
{ name: "note", width: 60, sortable: false, editable: true, edittype: "textarea" },
{ name: "tax", width: 52, editable: true, template: numberTemplate },
{ name: "amount", width: 75, editable: true, template: numberTemplate },
{ name: "total", width: 60, template: numberTemplate }
],
rowNum: 10,
rowList: [5, 10, 20],
iconSet: "fontAwesome",
pager: "#pager",
gridview: true,
autoencode: true,
ignoreCase: true,
sortname: "invdate",
viewrecords: true,
sortorder: "desc",
height: "auto",
rownumbers: true,
editurl: "clientArray",
//editurl: "http://cdn.jsdelivr.net/test",
toppager: true,
onSelectRow: function (rowid) {
var $self = $(this),
savedRow = $self.jqGrid("getGridParam", "savedRow");
if (savedRow.length > 0) {
$self.jqGrid("restoreRow", savedRow[0].id);
}
$self.jqGrid("editRow", rowid, {
keys: true,
beforeSaveRow: myBeforeSaveRow
});
}
});
$.extend(true,$.jgrid.edit, {
closeAfterAdd: true,
navkeys: [true,33,34],
savekey: [true, 13],
recreateForm: true,
reloadAfterSubmit: false,
left: 10,
top: 15,
dataheight: '100%',
width: window.innerWidth - 18
});
$grid.jqGrid("navGrid", "#list_toppager", {
edit: true
});
$grid.jqGrid('inlineNav', '#list_toppager', {
edit: true
});
});
//]]>
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
The code, which you posted, have two small problems:
dateFormat: "d.m.Y" should be fixed to dateFormat: "dd.mm.yy".beforeSaveRow: myBeforeSaveRow in all inline editing. The current code uses if only is case of starting editing by direct call of editRow inside of onSelectRow.I suggest you to use inlineEditing option of free jqGrid:
onSelectRow: function (rowid) {
var $self = $(this),
savedRow = $self.jqGrid("getGridParam", "savedRow");
if (savedRow.length > 0 && savedRow[0].id !== rowid) {
$self.jqGrid("restoreRow", savedRow[0].id);
}
$self.jqGrid("editRow", rowid);
},
inlineEditing: {
// if defines COMMON inline editing options
keys: true,
beforeSaveRow: myBeforeSaveRow
}
see the demo.