topic Re: How to format date in PopupTemplate in 4.x in ArcGIS JavaScript Maps SDK Questions

How to format date in PopupTemplate in 4.x

LoriEmerson_McCormack — Thu, 18 Feb 2021 23:38:21 GMT

I am using ArcGIS API for JavaScript 4.13 and I cannot get the date formatted in my PopupTemplate. Attached are screenshots of what the popups look like when using date format and without. Here is the code:

var tplRoadRestriction = { // autocasts as new PopupTemplate() title: "Road Name: {RoadName}", content: " Road Number: {RoadNumber}" + " From Desc: {FromDesc}" + " To Desc: {ToDesc}" + " From Milepost: {FromMP}" + " To Milepost: {ToMP}" + " District: {District}" + " Date On: {DateOn}" + " Date Off: {DateOff}" + " Restriction: {Restriction}", autoCloseEnabled: true };

var tplRoadRestriction = new PopupTemplate({ // autocasts as new PopupTemplate() title: "Road Name: {RoadName}", outFields: ["*"], content: [{ // It is also possible to set the fieldInfos outside of the content // directly in the popupTemplate. If no fieldInfos is specifically set // in the content, it defaults to whatever may be set within the popupTemplate. type: "fields", fieldInfos: [{ fieldName: "RoadNumber", label: "Road Number" }, { fieldName: "FromDesc", label: "From Desc:" }, { fieldName: "ToDesc", label: "To Desc:" }, { fieldName: "FromMP", label: "From Milepost:" }, { fieldName: "ToMP", label: "To Milepost:" }, { fieldName: "District", label: "District:" }, { fieldName: "DateOn", label: "Date On:", format: { dateFormat: 'shortDateShortTime' } }, { fieldName: "DateOff", label: "Date Off:", format: { dateFormat: 'shortDateShortTime' } }, { fieldName: "Restriction", label: "Restriction:" }] }] });

Re: How to format date in PopupTemplate in 4.x

ManishPatel — Thu, 18 Feb 2021 23:48:10 GMT

Hi @LoriEmerson_McCormack ,

The date that is represented is in epoch. You may need to convert it to Date format. You can use one of the below and try to convert it.

new Date(feature.graphic.attributes.DATE_TO);

Math.round (new Date().getTime() / 1000);

Re: How to format date in PopupTemplate in 4.x

LoriEmerson_McCormack — Fri, 19 Feb 2021 19:56:49 GMT

Thanks Manish,

Here is my code implementing your solution. Note I formatted the date using getMonth() + 1, getDate() + 1, and getFullYear():

tplRoadRestriction using the code above:

tplRoadRestriction using only the new Date(). Note how the Date On date is one day off, and the Date Off is NULL but shows as year 1899.

Re: How to format date in PopupTemplate in 4.x

LoriMcCormack1 — Wed, 09 Nov 2022 22:39:59 GMT

I just needed to change the dateFormat from 'shortDateShortTiem' to 'short-date' as shown here:

fieldName: "DateInstalled", label: "Date Installed:", visible: true, format: { dateFormat: 'short-date' }