The date coulmn that is returned in json is 1371700800000. I'm trying to convert it to mm/dd/yyyy format .
I have the code below to format in the jqgrid , but still getting the value of the date as NaN/NaN/NaN. I'm using jqgrid version 4.4.1. Please help.
{name:'inactiveDate',index:'inactiveDate', width:30, formatter:'date', formatoptions: {srcformat:"d/m/Y H:i A", newformat: 'ShortDate' },editable:true,edittype:"text",editoptions: {size: 10, maxlengh: 10,dataInit : function (elem) {
$(elem).datepicker();
}}}
I have resolved the NaN/NaN/NaN issue for date-field by manually altering the jquery.jqgrid.src.js (4.5.2).
In my case, the json response would return date in an 'ISO1860Long'. It used to work till the 4.1.2 jqgrid version
Search for "parseDate" function; goto the line after :
if( opts.masks.hasOwnProperty(format) ) { format = opts.masks[format]; }
if(date && date != null) {
and add the below if check :
if(date.constructor === Number) {
if(String(format).toLowerCase() == "u") {
date = date*1000;
}
timestamp = new Date(date);
} else
before the existing :
if( !isNaN( date - 0 ) && String(format).toLowerCase() === "u") {
you can translate the changes to jquery.jqgrid.min.js yourself IF needed
Date format mm/dd/yyyy is displayed in jqGrid like 0404/2828/16161616, you should use this format m/d/y and it is displayed as 04/28/16. Single m or d or y is enough otherwise it repeats double.
Note: For convert long date in jqGrid mention U/1000 at srcformat in formatoptions function.
Code:
{name:'startDate',index:'startDate',width:120, formatter: 'date', formatoptions: { srcformat: 'U/1000', newformat:'m/d/Y' }},
Output In jqGrid Column: 04/28/16
Code:
{name:'startDate',index:'startDate',width:120, formatter: 'date', formatoptions: { srcformat: 'U/1000', newformat:'d-M-Y H:i A' }},
Output In jqGrid Column: 28-Apr-2016 08:30 AM
I have faced same issue I have solved directly when check date is null or defined something else I had set condtion and directly return funcion it works proper.
please go to parseDate function
befor this logic undestand the code logic.
if (date && date != null) {
if(date != '' && date == 'N.A'){
return 'N.A';
}
Related
Is there any option to specify timezone In Guriddo jqgrid for date fields to show the date value as per client(browser) timezone like jstl fmt:timezone?
Currently, I am using below format options for date field.
{ name : 'approveDate', index : 'approveDate', width : 100,search:true,searchoptions: { dataInit: dateFieldsInit}, editable : false,formatter:'date',formatoptions: {srcformat: 'U/1000', newformat: 'Y-m-d H:i:s' } }
This is possible and depend on your need.
First of all your setting srcformat: ‘U/1000’ is not correct and Gurddo will not recognize this format. You should perform calculations for the Unix timestamp before to pass the data to jqGrid.
1.First option is to show the time offset without to inform user about this. This is done with the settings userLocalTime set to true in format options.
{ name : 'approveDate', index : 'approveDate', width : 100,search:true,searchoptions: { dataInit: dateFieldsInit}, editable : false,formatter:'date',formatoptions: {srcformat: 'U', newformat: 'Y-m-d H:i:s', userLocalTime : true } }
2.You can use either the option O or T newformat. In this case userLocalTime should be set to false
{ name : 'approveDate', index : 'approveDate', width : 100,search:true,searchoptions: { dataInit: dateFieldsInit}, editable : false,formatter:'date',formatoptions: {srcformat: 'U', newformat: 'Y-m-d H:i:s O' } }
or
{ name : 'approveDate', index : 'approveDate', width : 100,search:true,searchoptions: { dataInit: dateFieldsInit}, editable : false,formatter:'date',formatoptions: {srcformat: 'U', newformat: 'Y-m-d H:i:s T' } }
The T option give more information.
Everthing is explained into the documentation
I have one question regarding custom filters in free jqGrid 4.15.4. I want to implement a search functionality where if I select 'less than but not null or empty' filter then it should show only rows of records which column isn't null or empty. I am able to create custom filter which gives 'is null' or 'isn't null' from this thread.
But when I tried to create for mine requirement, I wasn't able to figure out what operator I have to use for 'less than but not null or empty'.
for example, I have used this code sample to create custom filter:
customUnaryOperations: ["lne"],
customSortOperations: {
lne: {
operand: "<!=''",
text: "less but not empty",
filter: function (options) {
var v = options.item[options.cmName];
if (v !== undefined && v !== "") {
return true;
}
}
}
The above operator I've used in search option toolbar.
searchoptions: {
searchOperators: true,
sopt: ['eq', 'lt', 'gt','lne'],
}, search: true,
Meanwhile, I don't want to use formatter: "integer" (suggested here) as this only assigns 0 to all null record column cells, and still visible in records whenever one selects 'less than' filter .
For reference, I've created one fiddle which consists of the requirement and two images for more clarity. So, Can anyone help me out on this? I hope I'vent re-asked this again.
Thank you in advance.
The code of the filter could be like the following
customSortOperations: {
lne: {
operand: "<!=''",
text: "less but not empty",
filter: function (options) {
var v = options.item[options.cmName];
if (v !== undefined && v !== "" &&
parseFloat(v) < parseFloat(options.searchValue)) {
return true;
}
}
}
}
See modified demo https://jsfiddle.net/OlegKi/x3fger4z/17/
/Date(1352658600000)/
When Display the date Date is not Display in Proper Format.
How to convert in to proper Format(dd/mm/yyyy)?
All you need to make the conversion is setting date formatter in jqGrid colum model:
$('#gridId').jqGrid({
...
colModel: [
...
{ name: 'Column Name', index: 'Column Index', ..., formatter: "date", formatoptions: { newformat: "m/d/Y"} },
...
],
...
});
For the newformat option jqGrid supports PHP date formatting.
Taken from the accepted answer here - Converting json results to a date
You need to extract the number from the string, and pass it into the Date constructor:
var x = [ {"id":1,"start":"\/Date(1238540400000)\/"}, {"id":2,"start":"\/Date(1238626800000)\/"} ];
var myDate = new Date(x[0].start.match(/\d+/)[0] * 1));
The parts are:
x[0].start - get the string from the JSON
x[0].start.match(/\d+/)[0] - extract the numeric part
x[0].start.match(/\d+/)[0] * 1 - convert it to a numeric type
new Date(x[0].start.match(/\d+/)[0] * 1)) - Create a date object
I have a column named event_date. I want to warn the user if he trys to submit the info without filling up the event_date column and prevent further execution. Here is how I define my column:
header: 'Event_date',
width: 115,
dataIndex: 'event_time',
renderer: this._renderExactDate,
field: {
type: 'textfield'
}
and my render function is:
_renderExactDate: function(date) {
if (date == '0000-00-00 00:00:00' || date == undefined) {
Ext.MessageBox.show({
title: 'New event',
msg: 'You must set a date',
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
else
{
return date;
}
}
but obv. renderer is not the way to do this, yet I haven't found a way to do this.
thanks
Leron
If this is using ExtJS4 then you should make use of the model field validations field to set the accepted format. Write a custom one if any of the standards don't fit the bill. Then you can check if the model is valid before any attempts to sync and flag a warning accordingly.
The event you want to hook into is this one. Then you can get the record/model and check its 'isValid' method before generating your warning.
Link: Ext.grid.plugin.CellEditing validateedit event
Does anybody have an example of using the date formatter with a server side database, or can you point me to something to help?
You can find information about predefined formatters on the jqGrid wiki.
The following is an example of how date formatting can be used in the grid. The format ShortDate displays the date according to the selected locale. You can use your own formatting instead, for example Y-m-d H:i:s.
srcformat describes the format of the date as sent by the server, newformat describes the desired output format.
This example includes searchoptions which will make sure that your users can select the desired date with the help of a datepicker when performing a search on the grid.
colModel :[
{ name:'startdate', index:'startdate', formatter:'date',
formatoptions: { srcformat:'m/d/Y', newformat:'ShortDate' },
searchoptions: { sopt: ['eq','lt','le','gt','ge'],
dataInit : function (elem) {
$(elem).datepicker({ changeMonth: true, changeYear: true,
dateFormat: 'yy-mm-dd' });
}
}
}
]
We can also take the transient field of the date in pozo class and check in getter methed if date is not null then convert it into datetostring .Also we have to change in jsp where we used this jqgrid we have to take transient field instead of date field.
example :
(Pozo Class)
transient private String indentDate_String;
public String getIndentDate_String()
{
if(indentDate != null)
indentDate_String = DateConversion.dateToString(indentDate);
return indentDate_String;
}
jqgrid (jsp form):
colNames:['Indent Date'],
colModel:[
{name:'indentDate_String',index:'indentDate',autoheight: true, width:100},
]