Adding the Current Date and Time Formatted

Hey. I am trying to add text that will add the current date and time. I added an HTML widget box and added this to it…

         <script language="javascript"> 
              var today = new Date();

In the HTML Head I have this:

    texty {
        font-family: Lato, sans-serif;
        font-style: oblique;
        font-size: 18 pt;
        color: #ffffff;

So it doesn’t work at all. It comes in black (on a black background) and the next problem is that I want to format the results as “02/29/16 1:52pm”

Anybody have any insight in how to format script in an HTML widget box and also the correct JavaScript language to make the date and time display as stated? Thank you for any help with this.

Previously in Edge Animate I created this code to make it all happen…

var theTimeBox = sym.getSymbol("timeTxt_symbol");
var cbcDate = new Date();
var datestring = cbcDate.toDateString();

var cbcTime = new Date();
var h = cbcTime.getHours();
var m = cbcTime.getMinutes();
var y = cbcDate.getFullYear();
var mo = cbcDate.getMonth();
var d = cbcDate.getDate();

var mStr = m;

if (m <= 9) {
	mStr = "0" + m;

var hStr = h;

if (h > 12) {
	hStr = h % 12;
if (h == 12) {
	hStr = "12";
if ((h % 12) < 10) {
	hStr = "0" + hStr;

var moStr = mo + 1;

//alert("moStr is " + moStr + "/hStr is " + hStr + "/mStr is " + mStr);

var theDateAndTime = (moStr + "/" + d + "/" + y + "   " + hStr + ":" +  mStr);


Try this (see HEAD in the attachment). Not pretty, but should get you started. (15.5 KB)

1 Like

So many thanks! Here are the steps for others looking to do the same:

  1. I made a function called “tellTheTime” and put this code into it:

     setInterval(function() {
         var d = new Date();
         var hours = d.getHours();
         var minutes = d.getMinutes();
         var ampm = hours >= 12 ? 'pm' : 'am';
         hours = hours % 12;
         hours = hours ? hours : 12; // the hour '0' should be '12'
         minutes = minutes < 10 ? '0'+minutes : minutes;
         var strTime = hours + ':' + minutes + ' ' + ampm;
         document.getElementById("timeText").innerHTML = d.getMonth()+1+"/"+d.getDate()+"/"+d.getFullYear() + " " + strTime;
       }, 1000);

(setInterval was the key)

  1. Call the function “tellTheTime” onSceneLoad
  2. make sure to name the formatted text box “timeText” in Identity/Unique Element ID

It works great! Thanks again.


Well since I was having a quick look at it any way. (11.9 KB)

This isn’t working for me… I’m following it to the tee - but no dice. Should the text box be formatted in a certain way? Should it be blank? Thanks for your help!! The time. The “tellTheTime” function.

This may be because the text wasn’t formatted as code (I changed it so quotes " don’t become smart quotes which isn’t readable by the JavaScript interpreter.). Check out the attached example: (11.7 KB)

How do you PM?

Click on the user, then click ‘Message’ on their profile page.


I include the question on this string, as it’s very similar subject.
Can anyone help me to adapt this working script? I need to show the defined time in a text box or widget.

var day = new Date();
var thirdDay = new Date(day);
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
console.log(thirdDay.toLocaleDateString('es-ES', options));
console.log(thirdDay.toLocaleDateString('en-EN', options));
// result is "sábado, 6 de julio de 2019"
// result is "Saturday, July 6, 2019"

I was thinking on this for head HTML:

tellTheTime(function() {
var day = new Date();
var thirdDay = new Date(day);
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
document.getElementById("thirdDay").innerHTML = console.log(thirdDay.toLocaleDateString('es-ES', options));

But does not work. Any help?

You can put into a Hype function that is called in scene prepare for display (Hype 4) or scene init/load (Hype 3).

Then you need to remove the console.log and the corresponding brackets. As console.log is a specific command to post to the console and doesn’t return the value to your variable declaration.

Also use hypeDocument.getElementById if you use it inside of Hype as sometimes Hype renames ID’s.

var day = new Date();
var thirdDay = new Date(day);
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
hypeDocument.getElementById("thirdDay").innerHTML = thirdDay.toLocaleDateString('es-ES', options);

Code not tested as I am only on my iPhone

Thank you Max, but I can’t make it work.

I did the following:
1.- Make a Javascript with your content:

var day = new Date();
var thirDay = new Date(day);
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
hypeDocument.getElementById("ThirDay").innerHTML = ThirDay.toLocaleDateString('es-ES', options);

2.- Set the Javascript on a timeline, inside a scene. That is important. I need different dates for different widgets, located on different timelines. So depending what timeline is shown, We read the desire date.

3.- Define Unique ID for the widget box.

This one works as a independent widget. But I can get further:

var day = new Date();
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
document.write(new Date().toLocaleDateString('es-ES', options)); 
var day = new Date();
var thirDay = new Date(day);
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
hypeDocument.getElementById("ThirDay").innerHTML = thirDay.toLocaleDateString('es-ES', options);
1 Like (12,1 KB)

1 Like

@h_classen, @Daniel, @MarkHunte, @gthroop @cjacobs627

Hi @MaxZieb,

Your sample work till my last Hype update to version 4.1.8.

Y used it like this:

	var day = new Date();
	var thirdday = new Date(day);
	var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
	hypeDocument.getElementById("date1").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date2").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date3").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date4").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date5").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date6").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date7").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date8").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date9").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date10").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date11").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date12").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date13").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date14").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date15").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date16").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date17").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date18").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date19").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date20").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date21").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date22").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date23").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date24").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date25").innerHTML = thirdday.toLocaleDateString('es-ES', options);
	hypeDocument.getElementById("date26").innerHTML = thirdday.toLocaleDateString('es-ES', options);

Now just the first ID label works (date1).

What's the way I should define 26 texts for 26 unique IDs?
(actually the same date for the 26!!).

You could use class based selection instead…

var day = new Date();
var thirdDay = new Date(day);
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};

var sceneElm = document.getElementById(hypeDocument.currentSceneId());

sceneElm.querySelectorAll('.dateField').forEach(function(elm, index) {
	elm.innerHTML = thirdDay.toLocaleDateString('es-ES', options);
}) (16,5 KB)

I am actually not sure why the update of Hype should have broken your page, that would require your actual file. But this should work as well and doesn't require unique IDs.


Thank you @Maxzieb!!
You are right I have demonstrate that my problem has nothing to do with the version, but with the big file I am working with.

And you are right. This is work perfect with a class based selection.


@MaxZieb, Can you please help?

Thank you for your hint, but something is wrong on my work, since I make the change defining a class, as you suggested. I get unwanted scene selections.

Provably, you need further knowledge of what I do pretend...

The work pretends to give info in 4 days advance, about gigs on a calendar, according to todays date:

and the script you wrote, I understand that you just pretended to show on screen a date,(as you can see on image linked), on a certain timeline, on a certain scene (that is also my aspiration). Here the image on normal behavior:

But I get unwanted scene selections. I guess the issue is related to your script, since I have never finde such behavior on hype, with the scripts already written. Here I show you the the wrong behavior (with yesterday date). You can see text boxes from different timelines rendered together, one on the top of the other:

Here you have the hype file, if you need to take a look:

Thank you in advance for your time!!

The code change using a class shouldn't make any layers visible. It just sets the inner HTML. Hence, you have to make sure that you don't assign the class to anything other than where you want to replace inner HTML.

1 Like

Thank you @MaxZien. The cause of the problem is still a mystery.

I tried to reduce complexity by eliminating the script, by using a widget instead.


<p style="color: #ffffff; font-family: Arial Black; font-size:32px; text-shadow: 6px 6px 4px #09106E;">
var day = new Date();
var thirdDay = new Date(day);
thirdDay.setDate(day.getDate()+ 3);

var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
document.write(thirdDay.toLocaleDateString('es-ES', options));




It works, but if anyone sees something wrong, please, tell me!.