Dynamic Date in Text box not based on data

kmsmikrud · ‎03-02-2021

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.

Thanks in advance,

Kathy

DavidMartinez · ‎03-08-2021

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

DavidMartinez · ‎03-02-2021

Hi Kathy,

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

David

kmsmikrud · ‎03-06-2021

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

DavidMartinez · ‎03-08-2021

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

kmsmikrud · ‎03-08-2021

Hi @DavidMartinez ,

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

SolanaFoo2 · ‎05-07-2021

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

SolanaFoo2 · ‎05-07-2021

Hey David,

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

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

Thanks!

OliviaMancuso

I'd be interested in this solution, however, when I plug the script into the embed widget, nothing happens. The widget just displays the HTML code itself. The Esri help documentation only talks about embedding with code for iframes. Am I doing something wrong in the embed widget, or did some functionality get removed to restrict what code can be used with this widget?