How can I format a date within a InfoWindow for a Graphics Layer?

CraigPatterson · ‎07-28-2016

I have a GraphicLayer that I build using a QueryTask. One of the attributes is a date field. When the InfoWindow for this layer is rendered, it displays the date in Epoch or Unix format, IE, -297512519. I've tried various solutions for formatting the date in the InfoTemplate. Here are a couple of them:

${PRINT_DATE:DateFormat(selector:'date')}

${PRINT_DATE:DateFormat(datePattern:'MM/dd/yyyy.', selector:'date')}

With a custom function. This works in formatting my DataGrid. I've tried to embed this inline into the InfoTemplate

${PRINT_DATE:formatDate}

function formatDate(datum){

if (datum){

var d = new Date(datum);

return dojo.date.format(d, {

selector:'date',

datePattern: 'MM/dd/yyyy'

}

return;

}

Any suggestions?

Thanks,

Craig

CraigPatterson · ‎07-28-2016

Hi Robert,

Thanks so much for replying. I actually had tried your proposed solution previously without luck. I did find a solution though. I found this old thread and based my solution on it, InfoWindow formatting I also used code from this site, Epoch Date Conversion - JSFiddle.

In case anyone else runs into a similar issue, here's what I did.

var docInfoTemplate = new InfoTemplate();
  docInfoTemplate.setTitle(generateInfoTitle);
  docInfoTemplate.setContent(generateInfoContent);


//creates string for info tag  
function generateInfoContent(graphic){  
  var formatString = "<b>Bar Code:</b>" + graphic.attributes.BARCODE 
  + "<br/><b>File Number</b>: " + graphic.attributes.FILENUMBER 
  + "<br/><b>Date: </b>" + formatDateInfoWindow(graphic.attributes.PRINT_DATE) 
  + "<br/><b>System</b>: " + graphic.attributes.SYSREF;   
                 
  return formatString;   
}

function generateInfoTitle(graphic){
  var formatString = "<b>File Number</b>: " + graphic.attributes.FILENUMBER;

function formatDateInfoWindow(value){
  formattedValue = "";
  if(value){
  var dateVal = "/Date("+ value + ")/";
  var date = new Date(parseFloat(dateVal.substr(6)));
  formattedValue = date.getMonth() + "/" + date.getDate() + "/" + date.getFullYear();
  }
  return formattedValue;
}
  return formatString;
}

Craig

View solution in original post

RobertScheitlin__GISP · ‎07-28-2016

Craig,

Here is a sample that uses a query to populate a GL and sets the GLs infotemplate to use a date format:

<!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.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css" />
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #mapDiv{
        padding:0;
      }
    </style>

    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
      var map, gl;
      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/parser",
        "esri/tasks/query", "esri/tasks/QueryTask", "esri/layers/GraphicsLayer", "esri/graphic",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, InfoTemplate, parser, Query, QueryTask, GraphicsLayer, Graphic,
        SimpleMarkerSymbol, SimpleLineSymbol, Color
      ) {
        parser.parse();

        map = new Map("mapDiv", {
          basemap: "hybrid",
          center: [69.698, 26.057],
          zoom: 6
        });

        map.infoWindow.resize(250,95);
        map.on("load", mapLoaded);

        function mapLoaded() {
          gl = new GraphicsLayer();
          gl.setInfoTemplate(new InfoTemplate("${Name}","Magnitude ${Magnitude:NumberFormat(round:2)} earthquake occurred on ${Date_:DateFormat(datePattern:'MMMM d, yyyy.', selector:'date')}"))
          map.addLayers([gl]);
          var queryTask = new QueryTask("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0");
          var query = new Query();
          query.returnGeometry = true;
          query.outFields = ["*"];
          query.where = "Magnitude > 6";
          queryTask.execute(query, showResults, showError);
        }

        function showError (err) {
          console.error(err);
        }

        function showResults (results) {
          var resultItems = [];
          var resultCount = results.features.length;
          var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([255,0,0]), 1),
            new Color([0,255,0,0.50]));
          for (var i = 0; i < resultCount; i++) {
            var gra = new Graphic(results.features.toJson());
            gra.setSymbol(symbol);
            gl.add(gra);
          }
        }
      });
    </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>

CraigPatterson · ‎07-28-2016

Hi Robert,

Thanks so much for replying. I actually had tried your proposed solution previously without luck. I did find a solution though. I found this old thread and based my solution on it, InfoWindow formatting I also used code from this site, Epoch Date Conversion - JSFiddle.

In case anyone else runs into a similar issue, here's what I did.

var docInfoTemplate = new InfoTemplate();
  docInfoTemplate.setTitle(generateInfoTitle);
  docInfoTemplate.setContent(generateInfoContent);


//creates string for info tag  
function generateInfoContent(graphic){  
  var formatString = "<b>Bar Code:</b>" + graphic.attributes.BARCODE 
  + "<br/><b>File Number</b>: " + graphic.attributes.FILENUMBER 
  + "<br/><b>Date: </b>" + formatDateInfoWindow(graphic.attributes.PRINT_DATE) 
  + "<br/><b>System</b>: " + graphic.attributes.SYSREF;   
                 
  return formatString;   
}

function generateInfoTitle(graphic){
  var formatString = "<b>File Number</b>: " + graphic.attributes.FILENUMBER;

function formatDateInfoWindow(value){
  formattedValue = "";
  if(value){
  var dateVal = "/Date("+ value + ")/";
  var date = new Date(parseFloat(dateVal.substr(6)));
  formattedValue = date.getMonth() + "/" + date.getDate() + "/" + date.getFullYear();
  }
  return formattedValue;
}
  return formatString;
}

Craig

RobertScheitlin__GISP · ‎07-28-2016

Craig,

Strange that the full sample I sent you works fine but you could not get it o work. Either way glad you found a solution.

Don't forget to mark this thread as answered by clicking the "Correct Answer" link on the thread that answered your question even if it was your own.