Date and Time HTML code

[Sue Busher]

Does anyone have some HTML code that works within Frog Learn that will display the Date and Time like

DD Month Year
HH:MM

That will automatically adjust to British Summer Time and back again?

Thanks in advance

 

I found this code on line but can't get it to work:

 

 

<script type="text/javascript">
function GetClock(){
var d=new Date();
var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear();
if(nyear<1000) nyear+=1900;<p>
var nhour=d.getHours(),nmin=d.getMinutes(),ap;
if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}

if(nmin<=9) nmin="0"+nmin;

document.getElementById('clockbox').innerHTML=""+ndate+"/"+(nmonth+1)+"/"+nyear+" "+nhour+":"+nmin+ap+"";
}

window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox"></div>
 

[Graham Quince]

Hi @Sue Busher,

@clangstaff asked for something similar a little while ago:

I've not a lot of time today, but this should get you started.

 

[clangstaff]

@Sue Busher See code below - there are loads of adaptations that can be made have a look at the .JS website for any tweaks in format but this will simply display the date on your page then you can style this as you see fit.

We used this for a pop up banner on our website which said which timetable week it was and some other useful info.

 

  
<p id="showDate"></p>


    
<script>
     
var a = moment().format('dddd Do MMMM');
$('#showDate').html(a);
     
     
jQuery(document).ready(function(){
        jQuery('#hideshow').on('click', function(event) {        
             jQuery('#content').toggle('hide');
        });
    });
</script>

 

[Sue Busher]

Thanks. Can you let me know where I can add in the font, font size and colour? Not very good at HTML. @clangstaff 

[clangstaff]

No problem @Sue Busher  if you're not adding heaps of code I'd perhaps just add a line of code to to the p tag itself - see code below.

<p style="font-size:30px; font-family:arial; color:red;" id="showDate"></p>


    
<script>
     
var a = moment().format('dddd Do MMMM');
$('#showDate').html(a);
     
     
jQuery(document).ready(function(){
        jQuery('#hideshow').on('click', function(event) {        
             jQuery('#content').toggle('hide');
        });
    });
</script>

 

[Sue Busher]

Thanks @clangstaff. Don't suppose you also have some code for a Stopwatch?

[clangstaff]

@Sue Busher I don't I'm afraid - just the date and time

[Graham Quince]

Even i'm getting sick of typing this but I've built an activity timer in FrogCode:  

https://drive.google.com/file/d/0B5bTXEl9mgAhRFpkVHJRbW9FMDQ/view

[mmclaughlin]

@Graham Quince  Love it!!!

 

Any idea when this will become live?

@clangstaff  Thanks for the time code.  It is cool.

Matt McLaughlin

[Graham Quince]

Hi,

FrogCode will be live, but hidden in Dickens.  We're "launching" it April 19th, but for those who are desperate for it earlier, we can sort set up earlier.   There won't be sharing to FrogStore on launch.  That development is underway, but we will be able to use the community to provide widgets.

 

Graham

[Sue Busher]

That is exactly what I am after @Graham Quince.Can you send me a copy of the code now? Pretty please?

[Graham Quince]

Sorry - there's nowhere for it to live until FrogCode comes online.

[Sue Busher]

Gutted

[Chris.Smith]

On 15/03/2017 at 14:51, Graham Quince said:

Sorry - there's nowhere for it to live until FrogCode comes online.

 

On 16/03/2017 at 09:38, Sue Busher said:

Gutted

@Sue Busher as soon as you get Dickens you will be able to use the Package Manager to import and install widgets and apps found here on the Community! It won't mean that you will be able to tailor the widgets to your own needs but it will give you something in the meantime .