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…

  <texty>
         <script language="javascript"> 
              var today = new Date();
              document.write(today);
         </script>
    </texty>

In the HTML Head I have this:

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

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);

theTimeBox.$("timeTxt").text(theDateAndTime);

Try this (see HEAD in the attachment). Not pretty, but should get you started.
datetime.hype.zip (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.

2 Likes

Well since I was having a quick look at it any way.

dateFormat.hype.zip (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:

tellTheTime.zip (11.7 KB)

How do you PM?

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

Guys,

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);
thirdDay.setDate(day.getDate()+3);
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);
thirdDay.setDate(day.getDate()+3);
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);
thirdDay.setDate(day.getDate()+3);
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);
thirDay.setDate(day.getDate()+3);
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:

<texty>
<script>
var day = new Date();
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
document.write(new Date().toLocaleDateString('es-ES', options)); 
</script>
</texty>
var day = new Date();
var thirDay = new Date(day);
thirDay.setDate(day.getDate()+3);
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
hypeDocument.getElementById("ThirDay").innerHTML = thirDay.toLocaleDateString('es-ES', options);
1 Like

date.hype.zip (12,1 KB)

1 Like