jqGrid date column for inline editing is defined using colmodel and javascript below.
It uses jquery ui-date picker. This is lot of code to maintain and result is ugly.
How to use html5 native input type='date' for inline date editing if this is supported by browser instead of this code ?
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
}
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) {
if (/^\d+%$/.test(elem.style.width)) {
// remove % from the searching toolbar
elem.style.width = '';
}
// to be able to use 'showOn' option of datepicker in advance searching dialog
// or in the editing we have to use setTimeout
setTimeout(function () {
$(elem).css({ "box-sizing": "border-box", width: "5.7em" }).datepicker({
// dateFormat: 'dd.mm.yy',
showOn: 'button',
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true,
onClose: function (dateText, inst) {
inst.input.focus();
}
})
.removeClass("ui-corner-all").addClass("ui-corner-left");
$(elem).next('button.ui-datepicker-trigger').button({
text: false,
icons: { primary: 'ui-icon-calendar' }
}).css({ width: '1em', height: '1.09em' })
.removeClass("ui-corner-all").addClass("ui-corner-right")
.find('span.ui-button-text')
.css({ padding: '0.1em' })
.siblings('span.ui-button-icon-primary')
.css({ marginLeft: "-8.5px", marginTop: "-8.5px" });
$(elem).next('button.ui-datepicker-trigger').andSelf().css("verticalAlign", "middle");
}, 100);
};
This is ASP.NET MVC4 application.
Update
I tried answer but got issues.
Date template in question does not contain newformat so this is still not defined. I replaced date parsing line with line
$(elem).val($.jgrid.parseDate($.jgrid.formatter.date.newformat, orgValue, "Y-m-d"));
as recommended in comment.
- Line
str = $.jgrid.parseDate("Y-m-d", $this.val(), cm.formatoptions.newformat);
convets valid date which is already converted to iso, like 1973-02-15
to long format like Thu Feb 15 1973 00:00:00 GMT+0200 (FLE Standard Time)
Required result is 1973-02-15 so conversion is not needed.
I solved this by replacing line
$this.val(str);
with
$this.val($this.val());
- After date inline edit is finished, date is shown in column in iso format. Localized date is shown only after grid is refreshed.
** Update **
Date does not fit to column width. In IE button is visible:
but in Chrome for same column width big empty space appears and only part of first button is visible:
How to fix this so that buttons are visible for same column width ?
I find your question interesting and created the demo which works in Google Chrome without jQuery UI Datepicker and display during date editing the results like
The demo have column
invdate
defined as belowThe callback function
initDateEdit
I defined asI don't know
<input type="date"/>
good enough. It uses input format of date as ISO. So I converted in the code above the original text to ISO to display correct date during editing. In the same way one have to convert the results of editing back to theformatoptions.newformat
. I usedbeforeSaveRow
callback in the case:where
myBeforeSaveRow
are defined as the following:UPDATED: One more demo supports better Opera 24 and empty input dates.
UPDATED 2: The demo contains small modification (the setting of
this
for$.jgrid.parseDate
) and it uses free jqGrid 4.8.