Popup template format not working

TonyDaSilva1 — Thu, 25 Jun 2020 21:20:11 GMT

I am trying to format the date in the popup on the map in ArcGIS for Javascript using the online documentation

Consider the following code:

const fieldInfo = new FieldInfo({

fieldName: "startDate",

format: new FieldInfoFormat({ dateFormat: "long-month-day-year" })

});

const popup = new PopupTemplate( {

title: "Project: <a href=\"http://pr/profile.aspx?pid={projectNumber}\" target=\"_blank\" >{projectName}</a>",

content: "Start Date: {startDate} End Date: {endDate}"

fieldInfos: [ fieldInfo ]

});

I can't seem to get the fieldInfos format to format the date. The date keeps coming out in the default format:

Any ideas to what is causing the issue?

for reference here are my dependencies:

"dependencies": {

"@angular/animations": "^9.1.11",

"@angular/cdk": "^9.2.4",

"@angular/common": "^9.1.11",

"@angular/compiler": "^9.1.11",

"@angular/core": "^9.1.11",

"@angular/forms": "^9.1.11",

"@angular/localize": "^9.1.11",

"@angular/material": "^9.2.4",

"@angular/platform-browser": "^9.1.11",

"@angular/platform-browser-dynamic": "^9.1.11",

"@angular/router": "^9.1.11",

"@ng-bootstrap/ng-bootstrap": "^6.1.0",

"@types/arcgis-js-api": "^4.15.0",

"classlist.js": "^1.1.20150312",

"rxjs": "^6.5.5",

"tslib": "^1.13.0",

"web-animations-js": "^2.3.2",

"zone.js": "^0.10.3"

"devDependencies": {

"@angular-builders/custom-webpack": "^8.4.1",

"@angular-devkit/build-angular": "^0.900.7",

"@angular/cli": "^9.1.9",

"@angular/compiler-cli": "^9.1.11",

"@angular/language-service": "^9.1.11",

"@arcgis/webpack-plugin": "^4.15.0",

"@types/jasmine": "~3.3.8",

"@types/jasminewd2": "^2.0.8",

"@types/node": "^12.12.47",

"codelyzer": "^5.2.2",

"jasmine-core": "~3.4.0",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~4.1.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~2.0.1",

"karma-jasmine-html-reporter": "^1.5.4",

"protractor": "^5.4.4",

"ts-node": "~7.0.0",

"tslint": "~5.15.0",

"typescript": "~3.7.5"

}

Re: Popup template format not working

JackFairfield — Thu, 02 Jul 2020 17:37:01 GMT

I would recommend simply switching the content property to a function like this:

const popup = new PopupTemplate( {
title: "Project: <a href=\"http://pr/profile.aspx?pid={projectNumber}\" target=\"_blank\" >{projectName}</a>",
content: ({graphic}) => {
const { startDate, endDate } = graphic.attributes;
const start = `${startDate.getFullYear()}-${startDate.getMonth()}-${startDate.getDate()}`;
const end = `${endDate.getFullYear()}-${endDate.getMonth()}-${endDate.getDate()}`;
return `Start Date: ${start} End Date: ${end}`;
}
});

I find it much easier to just create my own custom function for adjusting the field values instead of using the fieldInfos objects.

topic Popup template format not working in ArcGIS JavaScript Maps SDK Questions

Popup template format not working

Re: Popup template format not working