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);
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:
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));
}
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);
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.
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);
var day = new Date();
var thirdDay = new Date(day);
thirdDay.setDate(day.getDate()+3);
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);
})
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 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...
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: https://drive.google.com/file/d/1BrmVM9-rJ7z1qifTpmIp0VNk7321ca4s/view?usp=sharing
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.