How to define Date/Time’s format in the Label with ArcGIS API for JavaScript 4.x

Question

Hi,

In the JavaScript 3.x, the LabelClass class has a properties called fieldInfos, and within the fieldInfos object, I can specified how Time field is displayed in the label by setting format properties to “{ dateFormat:  “shortDate”}.    However, in the Javascript 4.x, there is no fieldInfos properties, therefore I am unable to format the Time value to the format I wanted.

How can I define Date/Time’s format in the Label?  Or, is there a global setting for configuration the Date/Time format in Javascript 4.x?

Any help would be appreciated.

Roman

RomanChueh · Answer

Hi Egge-Jan,

Thank you for replying quickly.   I will try to use Arcade expression as you have suggested.

Thanks,

Roman

Egge-Jan_Pollé · Answer

Hi Roman Chueh, Hmmm, you are right. In this case a simple JavaScript solution won't work. You will have to use Avenue or Arcade or something to accomplish what you want... In the sample below I have added three lines with date information to the label: var Today = Day(Now()) + '/' + (Month(Now()) + 1) + '/' + YEAR(Now()); var OBS_DT = $feature.OBS_DATETIME; var OBS_DT2 = Day($feature.OBS_DATETIME) + '/' + (Month($feature.OBS_DATETIME) + 1) + '/' + YEAR($feature.OBS_DATETIME); ‍‍‍ Please note: you have to add 1 to the month because the Arcade Month() function Returns the month of the given date. Values range from 0-11 where January is 0 and December is 11. See ArcGIS Arcade Date Functions | ArcGIS for Developers I have attached the full code of my test case (based on this sample Multi-line labels | ArcGIS API for JavaScript 4.12) below. Does this solve your issue? Egge-Jan <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/> <title>Multi-line labels with date information - 4.12title> <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css"/> <script src="https://js.arcgis.com/4.12/">script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } style> <script type="text/plain" id="label-expression"> var Today = Day(Now()) + '/' + (Month(Now()) + 1) + '/' + YEAR(Now()); var OBS_DT = $feature.OBS_DATETIME; var OBS_DT2 = Day($feature.OBS_DATETIME) + '/' + (Month($feature.OBS_DATETIME) + 1) + '/' + YEAR($feature.OBS_DATETIME); var DEG = $feature.WIND_DIRECT; var SPEED = $feature.WIND_SPEED; var DIR = When( SPEED == 0, null, (DEG < 22.5 && DEG >= 0) || DEG > 337.5, 'N', DEG >= 22.5 && DEG < 67.5, 'NE', DEG >= 67.5 && DEG < 112.5, 'E', DEG >= 112.5 && DEG < 157.5, 'SE', DEG >= 157.5 && DEG < 202.5, 'S', DEG >= 202.5 && DEG < 247.5, 'SW', DEG >= 247.5 && DEG < 292.5, 'W', DEG >= 292.5 && DEG < 337.5, 'NW', null ); var WIND = SPEED + ' mph ' + DIR; var TEMP = Round($feature.TEMP) + '° F'; var RH = $feature.R_HUMIDITY + '% RH'; var NAME = $feature.STATION_NAME; var labels = [Today, OBS_DT, OBS_DT2, NAME, TEMP, WIND, RH ]; return Concatenate(labels, TextFormatting.NewLine); script> <script> require([ "esri/WebMap", "esri/views/MapView", "esri/layers/FeatureLayer" ], function(WebMap, MapView, FeatureLayer) { const minScale = 250000000; const serviceUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/weather_stations_010417/FeatureServer/0"; const view = new MapView({ container: "viewDiv", map: new WebMap({ portalItem: { id: "372b7caa8fe340b0a6300df93ef18a7e" }, layers: [ new FeatureLayer({ url: serviceUrl, renderer: { type: "simple", symbol: { type: "simple-marker", color: [75, 75, 75, 0.7], size: 4, outline: null } }, labelingInfo: [ { labelExpressionInfo: { expression: document.getElementById("label-expression") .text }, labelPlacement: "center-right", minScale: minScale, symbol: { type: "text", // autocasts as new TextSymbol() font: { size: 9, family: "Noto Sans" }, horizontalAlignment: "left", color: "#2b2b2b" } } ] }) ] }), center: [-117.842, 33.799], zoom: 10 }); }); script> head> <body> <div id="viewDiv">div> body> html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RomanChueh · Answer

Hi Egge-Jan,

I have a feature layer with a date field that I want to use it as the Label. I don't know how your suggestion will work for me, could you please elaborate?

Thanks,

Roman