Hello, I have the following question. How can i set up a dateformat for a infowindow? Right now my problem is the infowindow is showing a incorrect timezone, (-3 hr to my current timezone), so i need to fix it. Here is my code: let chInfoTemp = new InfoTemplate ( ) ; chInfoTemp . setTitle ( " Current: " ) ; let chInfoContent = " Starting: ${initial_date:DateFormat(datePattern:'d MMMM yyyy, HH:mm:ss.', selector:'date')} " + " Final: ${er:DateFormat(datePattern:'d MMMM yyyy, HH:mm:ss.', selector:'date')} " ; chInfoTemp . setContent ( chInfoContent ) ; Thanks in advice!

yeah sorry i don't how to account for that then, there's probably a way to set the constant value to account for that but i don't know what that would be

Yea i read all of those already and i have tried but nothing came out of that XD

I don't, but I'd say go into the dojoToolkit: dojo/date/locale::format() — The Dojo Toolkit - Reference Guide and see what you can come up with

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Dateformat on infowindow

EvelynHernandez

Hello, I have the following question.

How can i set up a dateformat for a infowindow? Right now my problem is the infowindow is showing a incorrect timezone, (-3 hr to my current timezone), so i need to fix it.

Here is my code:

<SPAN class="keyword token">let</SPAN> chInfoTemp<SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">InfoTemplate</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 chInfoTemp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setTitle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"<b>Current:</b>"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 
 <SPAN class="keyword token">let</SPAN> chInfoContent <SPAN class="operator token">=</SPAN>
 <SPAN class="string token">"<div style=padding-top: 10px;><b>Starting: </b> ${initial_date:DateFormat(datePattern:'d MMMM yyyy, HH:mm:ss.', selector:'date')}<br></div>"</SPAN><SPAN class="operator token">+</SPAN>
 <SPAN class="string token">"<div style=padding-top: 10px;><b>Final:</b> ${er:DateFormat(datePattern:'d MMMM yyyy, HH:mm:ss.', selector:'date')}<br></div>"</SPAN><SPAN class="punctuation token">;</SPAN>
 chInfoTemp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setContent</SPAN><SPAN class="punctuation token">(</SPAN>chInfoContent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Thanks in advice!

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

EvelynHernandez

Right now if i dont place a dateFormat, they will show the correct datetime on the infoTemplate each time i click a feature. The thing is the format is in English, and i really need to have it in Spanish and in this way : d/MM/yyyy HH:MM:ss.

Do u know any fix for that? Because when i use the dateFormatter like this example:

${Date_:DateFormat(datePattern:'d/MM/yyyy HH:MM:ss', selector:'date')}

It will change the format to the desired one in spanish, but it will drop -3hrs to the current date.

DavidColey

I think so yes, I believe at the time we were accounting for EDT vs GMT and yes I think we required

"dojo/date/locale" aliased as locale

EvelynHernandez

<SPAN class="" style="color: #990000; border: 0px; font-weight: inherit; font-size: 15px;">14400000</SPAN> is 4 hrs?
Im right now in gmt -3 , and another thing i want to ask you is u are using dojo.locale, right?

Right now im not using popuptemplate, im using infotemplate, so the code that i have is the following.

<SPAN class="keyword token">var</SPAN> convertDate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">(</SPAN>jsDate<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN><SPAN class="punctuation token">{</SPAN>
 console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>jsDate<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">var</SPAN> myDate <SPAN class="operator token">=</SPAN> locale<SPAN class="punctuation token">.</SPAN><SPAN class="token function">format</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Date</SPAN><SPAN class="punctuation token">(</SPAN>Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">abs</SPAN><SPAN class="punctuation token">(</SPAN>jsDate <SPAN class="operator token">+</SPAN> <SPAN class="number token">108000000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN>
 selector<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"date"</SPAN><SPAN class="punctuation token">,</SPAN>
 datePattern<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'d/MMMM/yyyy HH:MM:SS'</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">abs</SPAN><SPAN class="punctuation token">(</SPAN>jsDate <SPAN class="operator token">+</SPAN> <SPAN class="number token">14400000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">return</SPAN> myDate<SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

<SPAN class="keyword token">let</SPAN> chqInfoContent <SPAN class="operator token">=</SPAN>
 <SPAN class="string token">"<div style=padding-top: 10px;><b>Time&nbsp; </b> ${initialDate:convertDate}<br></div>"</SPAN><SPAN class="operator token">+</SPAN>
 <SPAN class="string token">"<div style=padding-top: 10px;><b>ETR:</b> ${ETR:convertDate}<br></div>"</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

And the resolution that i have is showing me the infoWindowin milliseconds.

Thanks for ur help!!

DavidColey

Hi Evelyn, here's something we used back at 3.14:

convertDate <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>jsDate<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//console.log(jsDate);</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> myDate <SPAN class="operator token">=</SPAN> locale<SPAN class="punctuation token">.</SPAN><SPAN class="token function">format</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Date</SPAN><SPAN class="punctuation token">(</SPAN>Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">abs</SPAN><SPAN class="punctuation token">(</SPAN>jsDate <SPAN class="operator token">+</SPAN> <SPAN class="number token">14400000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; selector<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"date"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; datePattern<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'MMMM d, yyyy'</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//console.log(Math.abs(jsDate + 14400000));</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> myDate<SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Then in my popup template description I'd just set the function:

<SPAN class="keyword token">var</SPAN> popup <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PopupTemplate</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"My Title"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; description<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<b>Account:</b> {ACCOUNT}"</SPAN> <SPAN class="operator token">+</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"<br><b>Date:</b> {SomeDate:converDate}"</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>