nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

formatting a date/time field in dgrid

MichelleRogers1

I am working with the dgrid and cannot for the life of me figure out how to format the date/time field that I have. Right now it is coming in as a string of numbers. I tried doing this:

window.grid = new (declare([Grid, Selection])) ({   bufferRows:Infinity,   columns: {     "id": "ID",     "vehicleId": "Vehicle ID",     "velocity": {"label": "Speed (MPH)", "formatter":dojoNum.format},     "timestamp": {"label": "Time Stamp", "formatter":dojo.date.locale.format}   } }, "grid");

But it still didn't work. Is there a way to do this inside the formatter, or do I need to do it some other way?

Michelle

Encontre mais publicações marcadas com

Accepted answers

evtguy

When I've used a formatter with my dGrids, I have it call a standalone function instead of doing the formatting work inline. Your modified code would be something like this:

window.grid = new (declare([Grid, Selection])) ({   bufferRows:Infinity,   columns: {     "id": "ID",     "vehicleId": "Vehicle ID",     "velocity": {"label": "Speed (MPH)", "formatter":dojoNum.format},     "timestamp": {"label": "Time Stamp", "formatter":formatTimestamp}   } }, "grid"); . . . . function formatTimestamp(value) {  var inputDate = new Date(value);  return dojo.date.locale.format(inputDate, {    selector: 'date',    datePattern: 'MM/dd/yyyy'   }); }

All comments

evtguy

You could try other tools for formatting your dates. DateJS is a good library to have and use. One thing I've learned is that date formatting is NOT consistent across different browsers and DateJS does a pretty good job of doing this.

Another option you can try is simply this:

function formatTimestamp(value) {
 var inputDate = new Date(value);
 return inputDate.toString();
}

The text returned will be "Fri Feb 14 09:48:30 PST 2014"

Steve

MichelleRogers1

When I've used a formatter with my dGrids, I have it call a standalone function instead of doing the formatting work inline. Your modified code would be something like this:

window.grid = new (declare([Grid, Selection])) ({
  bufferRows:Infinity,
  columns: {
    "id": "ID",
    "vehicleId": "Vehicle ID",
    "velocity": {"label": "Speed (MPH)", "formatter":dojoNum.format},
    "timestamp": {"label": "Time Stamp", "formatter":formatTimestamp}
  }
}, "grid");
.
.
.
.
function formatTimestamp(value) {
 var inputDate = new Date(value);
 return dojo.date.locale.format(inputDate, {
   selector: 'date',
   datePattern: 'MM/dd/yyyy' 
 });
}

That did it! The only thing I added was in the datePattern: 'MM/dd/yyyy hh:mm:ss' because I wanted to show the time along with the date. The only problem I came across is that the seconds didn't show up. They just came in as 00 even though I know that the timestamp has seconds because the feature layer is set to refresh every 5 seconds. Any recommendations on how to get it out to the second? My supervisor has said he can live with just minutes if we can't get it down to the second, but would like seconds if possible.

evtguy

When I've used a formatter with my dGrids, I have it call a standalone function instead of doing the formatting work inline. Your modified code would be something like this:

window.grid = new (declare([Grid, Selection])) ({   bufferRows:Infinity,   columns: {     "id": "ID",     "vehicleId": "Vehicle ID",     "velocity": {"label": "Speed (MPH)", "formatter":dojoNum.format},     "timestamp": {"label": "Time Stamp", "formatter":formatTimestamp}   } }, "grid"); . . . . function formatTimestamp(value) {  var inputDate = new Date(value);  return dojo.date.locale.format(inputDate, {    selector: 'date',    datePattern: 'MM/dd/yyyy'   }); }

MichelleRogers1

Hi Michelle,

The date value you mentioned is epoch time,which is defined as the number of seconds since midnight (UTC) on 1st January 1970.

What is epoch time?
The Unix epoch (or Unix time or POSIX time or Unix timestamp) is the number of seconds that have elapsed since January 1, 1970 (midnight UTC/GMT), not counting leap seconds (in ISO 8601: 1970-01-01T00:00:00Z). Literally speaking the epoch is Unix time 0 (midnight 1/1/1970), but 'epoch' is often used as a synonym for 'Unix time'. Many Unix systems store epoch dates as a signed 32-bit integer, which might cause problems on January 19, 2038 (known as the Year 2038 problem or Y2038).

Human readable time     Seconds
1 hour    3600 seconds
1 day    86400 seconds
1 week    604800 seconds
1 month (30.44 days)     2629743 seconds
1 year (365.24 days)      31556926 seconds

Although when you are retrieving the value and want to display in your application you will have to convert it using the below:

var someDate = new Date(dateString);

Hope this helps.

Best Regards,
Manish Patel

I am still confused on where this code would go, and how it would come back into the dgrid. I am fairly new at coding with ESRI, so detailed help would be appreciated. My code is on jsfiddle here: http://jsfiddle.net/mrogers83/PDcZ2/1/

Thanks,
Michelle

ManishkumarPatel

Hi Michelle,

The date value you mentioned is epoch time,which is defined as the number of seconds since midnight (UTC) on 1st January 1970.

What is epoch time?
The Unix epoch (or Unix time or POSIX time or Unix timestamp) is the number of seconds that have elapsed since January 1, 1970 (midnight UTC/GMT), not counting leap seconds (in ISO 8601: 1970-01-01T00:00:00Z). Literally speaking the epoch is Unix time 0 (midnight 1/1/1970), but 'epoch' is often used as a synonym for 'Unix time'. Many Unix systems store epoch dates as a signed 32-bit integer, which might cause problems on January 19, 2038 (known as the Year 2038 problem or Y2038).

Human readable time     Seconds
1 hour    3600 seconds
1 day    86400 seconds
1 week    604800 seconds
1 month (30.44 days)     2629743 seconds
1 year (365.24 days)      31556926 seconds

Although when you are retrieving the value and want to display in your application you will have to convert it using the below:

var someDate = new Date(dateString);

Hope this helps.

Best Regards,
Manish Patel

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.