Hide Table of Contents
View Format dates in an info window sample in sandbox
Format dates in an info window

Description

This sample shows how to format the content of an info window using the date formatting functions added at version 2.2 of the ArcGIS API for JavaScript. You can format the info template content using one of the out-of-the box formatters or for more advanced options you can define a custom formatting function.

In this sample, the dates for each earthquake are formatted using the DateFormat option. In this code snippet, a date pattern is defined to display dates in a month, day, year format.

${Date_:DateFormat(datePattern:'MMMM d, yyyy.', selector:'date')

Code

<!DOCTYPE html>
<html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Date Format</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.38/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/css/esri.css" />
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #mapDiv{
        padding:0;
      }
    </style>

    <script>var dojoConfig = {parseOnLoad: true};</script>
    <script src="https://js.arcgis.com/3.38/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dojo.date.locale");
      dojo.require("dojo.number");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      
      var map;
      
      function init() {
        map = new esri.Map("mapDiv", { 
          basemap: "hybrid",
          center: [69.698, 26.057],
          zoom: 6
        });

        dojo.connect(map, "onLoad", mapLoaded);

        map.infoWindow.resize(250,95);
      }

      function mapLoaded() {
        //Some of the magnitude values have too many decimal places - use NumberFormat to round the values
        //Use DateFormat to format the date..
        var historicEarthquakes = new esri.layers.FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0", {
          infoTemplate: new esri.InfoTemplate("${Name}","Magnitude ${Magnitude:NumberFormat(round:2)} earthquake occurred on ${Date_:DateFormat(datePattern:'MMMM d, yyyy.', selector:'date')}"),
          outFields: ["*"]
        });
        
        map.addLayers([historicEarthquakes]);
      }
      dojo.ready(init);
    </script>
  </head>
  
  <body class="claro" style="font-size: small; font-family: Arial Unicode MS,Arial,sans-serif;">
    <div data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline', gutters:false" 
         style="width: 100%; height: 100%; margin: 0;">

      <div id="mapDiv" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'center'">
      </div>

    </div>
  </body>
</html>
 
          
Show Modal