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

750
4
07-29-2019 08:40 AM
Highlighted
New Contributor III

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

Reply
0 Kudos
4 Replies
Highlighted
MVP Regular Contributor

Hi Roman Chueh,

Would this work for you? Date.prototype.toLocaleString() - JavaScript | MDN 

Example:

var today = new Date();
console.log(today); // Output: Mon Jul 29 2019 19:06:57 GMT+0200 (Midden-Europese zomertijd)
options = {day: 'numeric', month: 'numeric', year: 'numeric'}
console.log(today.toLocaleString('nl-NL', options)); // Output: 29-7-2019
console.log(today.toLocaleString('en-US', options)); // Output: 7/29/2019
‍‍‍‍‍‍‍‍‍‍‍

HTH,

Egge-Jan

Reply
0 Kudos
Highlighted
New Contributor III

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

Reply
0 Kudos
Highlighted
MVP Regular Contributor

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

<!DOCTYPE html>
<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.12</title>
<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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Highlighted
New Contributor III

Hi Egge-Jan,

 

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

 

Thanks,

Roman

Reply
0 Kudos