/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
Related
I like to change the Type field drop down option depending on the inputs of Year and Level fields.
I am able to trigger an event when Level is change.
But how do I get the value of the Year field?
Portion of the code are as follows
colModel:[
{name:'Year',index:'Year', width:70,sortable:false,editable:true,align:'center',editoptions:{size:15, maxlength:4}, formoptions:{ rowpos:1, label: "Year (*)"},editrules:{required:true}},
{name:'Level',index:'Level', width:70,sortable:false,editable:true,align:'center',edittype: "select", editoptions: { value: '1:1;2:2;3:3;4:4;5:5;6:6', defaultValue:'1', dataEvents : [
{
'type' : 'change',
'fn' : function ( el ) {
// get the newly selected value from the user
var levelz = $(el.target).val(), yearz ;
var row = $(el.target).closest('tr.jqgrow');
var rowid = row.attr('id');
//yearz = ??
if (parseInt(levelz)==5 || parseInt(levelz)==6)
{
if (parseInt(yearz)>2017)
{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '1:Sem 1;4:Sem 2;6:EY;9:OVR', defaultValue:'Sem 1'}} );
}else{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '', defaultValue:''}} );
}
}else{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '1:TA1/CT1;2:TA2-before 2013;3:MY/TA2/CT2;4:TA3/CT3;5:TA4-before 2013;6:EY/TA4/CT4;9:OVR;D:CW1;E:CW2;F:CW3;G:CW4', defaultValue:'TA1'}} );
}
}
}]}, formoptions:{ rowpos:2, label: "Level (*)"},editrules:{required:true}},
{name:'Term',index:'Term', width:70, sortable:false,editable: true,align:'center',edittype: "select", editoptions: { value: '1:TA1/CT1;2:TA2-before 2013;3:MY/TA2/CT2;4:TA3/CT3;5:TA4-before 2013;6:EY/TA4/CT4;9:OVR;D:CW1;E:CW2;F:CW3;G:CW4', defaultValue:'TA1'}, editrules: { required: true }, formoptions:{ rowpos:3, label: "Type"}},
The codes are from piecing together what I read from google search...
I face 2 issues:
1) I don't know how to get the Year value
2) The drop down option list doesn't seems to change. - hmm it seems that if I close the edit form and open again, the Type field drop down option changes. What I need is to change the option on the fly - wonder how this can be done...
After much googling, managed to get the ans from Oleg's post as shown here
Also from his example, I derive the year value:
var yearz = $("#Year.FormElement", form[0]).val();
I need help using a custom column filter for handling JS objects.
I have a slickgrid table where the values in one column are JS object:
[
{ id: "1234", text: "Batman"},
{ id: "2345", text: "Robin"}
]
I use a custom formatter to smash the object into a string:
// convert [{id:string, text:string}...] to string
const optionFormatter: Formatter = (row, cell, value, columnDef, dataContext: any) =>
value ? value.map(o => o.text).join(', ') : '';
Which displays in slickgrid as
Batman, Robin
my slickgrid options use gridmenu and enables column filtering:
this.gridOptions = {
enableGridMenu: true,
enableFiltering: true,
enableAutoResize: true,
enableColumnReorder: true
};
My columnDef enables filtering for this column:
{
id: 'owners',
name: 'Owners',
field: 'owners',
sortable: false,
formatter: optionFormatter,
filterable: true
}
Everything works if the value in the cell is a string, but the filter doesn't work if the cell is an object. I assume the filter is searching the pre-formatted value.
Is there a way to provide the column with a custom filter function that knows how to search the JS object for the query string? For example if I could just search the JSON.stringify(value), that would be good enough.
Alternatively, this answer describes how I could use the formatter to store the formatted text as a different string property in dataContext. If I do that, how do I specify which property to filter, seeing as it is a different property than the column field?
I found a workaround.
preprocess my data, calling JSON.stringify on all values that are objects:
flattenFeature(f: Feature): any{
var res = {};
for (var prop in f) {
res[prop] = (typeof f[prop] === 'object') ? JSON.stringify(f[prop]) : f[prop];
}
return res;
}
Then in my formatter, I parse the json, before formatting:
// convert [{id:string, text:string}...] to string
const optionFormatter: Formatter = (row, cell, value, columnDef, dataContext) =>
value ? JSON.parse(value).map(o => o.text).join(', ') : '';
This allows the standard string filter to search the stringify'd JSON
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';
}
My kendo grid is showing date like this /Date(691869600000)/ . How do i solve this?
Using this answer I got the Steve code to work for my case. Try this template:
"#= kendo.toString(new Date(parseInt(myField.substr(6))),'MM/dd/yyyy HH:mm tt')#"
'#= kendo.toString(yourDateField,"MM/dd/yyyy HH:MM tt")#'
and make your field type as date.
You need to specify the date as a type in your datasource definition - else it will just be a string:
For example if your field is birthday:
var kendoDS = new kendo.data.DataSource({
schema: {
model: {
fields: {
birthday: { type: "date"}
}
}
});
And when you define the Grid:
kendoGrid({
selectable: whatever values..etc
columns: your-response,
dataSource: kendoDS
});
See this for more info: http://www.kendoui.com/forums/framework/data-source/json-date-handling-changed-in-latest-release.aspx
Use template like the following or like the one in the documentation link.
#= kendo.format("{0:d}",theDateTimeFieldName)#
var offsetMiliseconds = new Date().getTimezoneOffset() * 60000;
#= kendo.toString(new Date( parseInt(JSONDateTime.substr(6)) + offsetMiliseconds),"dd-MMM-yyyy hh:mm tt") #
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},
]