Dynamic Date in Text box not based on data

316
6
Jump to solution
03-02-2021 08:53 AM
Labels (1)
kmsmikrud
Occasional Contributor III

Hi,

I am new to Experience Builder and would like the current local date to appear in a text box. The idea is the map displays current survey day results for surveys and then another page displays all surveys, so the '3/2/2021' would update dynamically each day.

Is there a way to accomplish this? I'm not seeing an option since its not directly linked to selected data.

kmsmikrud_0-1614703944346.png

Thanks in advance,

Kathy

0 Kudos
1 Solution

Accepted Solutions
DavidMartinez
Esri Regular Contributor

Hi Kathy,

You could use the embed widget and use code to show the current local date of the client browser. For example, something like this:

<!DOCTYPE html>
<html>
<style>
body {
font-family: Avenir Next;
}
</style>
<body>
<p id="t1" style="color:rgb(230, 107, 0); "></p>
<script>

let today = new Date();

let date = (today.getMonth()+1)+'-'+today.getDate()+'-'+today.getFullYear();

document.getElementById("t1").innerHTML = date;
</script>
</body>
</html>

 

Hope this helps.

Cheers,

David

View solution in original post

6 Replies
DavidMartinez
Esri Regular Contributor

Hi Kathy,

So in a text box, you just want it to show the current local date of the client browser? 

 

David

0 Kudos
kmsmikrud
Occasional Contributor III

Hi David,

Yes to show the current local date of the client browser.  I think this would be fine. The associated map will hopefully be showing survey data for the local day.

I appreciate any ideas you might have. I'm trying to figure out the best way for the associated map to also have a dynamic date filter on the layers too to only be showing data from local date and in our case AK time zone.

Thanks much,

Kathy

0 Kudos
DavidMartinez
Esri Regular Contributor

Hi Kathy,

You could use the embed widget and use code to show the current local date of the client browser. For example, something like this:

<!DOCTYPE html>
<html>
<style>
body {
font-family: Avenir Next;
}
</style>
<body>
<p id="t1" style="color:rgb(230, 107, 0); "></p>
<script>

let today = new Date();

let date = (today.getMonth()+1)+'-'+today.getDate()+'-'+today.getFullYear();

document.getElementById("t1").innerHTML = date;
</script>
</body>
</html>

 

Hope this helps.

Cheers,

David

View solution in original post

kmsmikrud
Occasional Contributor III

Hi @DavidMartinez ,

I just tried the embed and your code above. It worked, amazing!! Thank-you so much!!!

sofoo
by
New Contributor III

Hm, works when I switch to "Arial" but doesn't recognize the Avenir Next font.

0 Kudos
sofoo
by
New Contributor III

Hey David,

I'm unable to get the font to stay in Avenir Next:

sofoo_0-1620432946878.png

I switched it to black but besides that haven't changed anything else.

Thanks!

0 Kudos