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

RomanChueh · ‎07-29-2019

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

Egge-Jan_Pollé · ‎07-29-2019

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

RomanChueh · ‎07-29-2019

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

Egge-Jan_Pollé · ‎07-29-2019

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RomanChueh · ‎07-30-2019

Hi Egge-Jan,

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

Thanks,

Roman