Hello all,

I have looked around but could find a module that will display the data and time on the front page. Does anyone know of a good one? All I want is a little date and time listed near the top of the site.

Thanks for any pointers.

S

Comments

Kuldip Gohil’s picture

create custom block .. with php code that shows date.. i think there is not any default functionality with Drupal to show date and time on Front Page.

425Media’s picture

Thanks kuldip. I will do that. It would be great if there was a module that did date and time tho. :)

S

ericduran’s picture

It's easier to just create a theme variable and then print this variable on the page template. I custom block will be overkill for a small task like this.

Eric

mannkoepke’s picture

make your self an html block with the following, and place that block where ever you want.

<div  onload="updateDateTime();">
	 <span id="date">&nbsp;</span><br/>
 	 <span id="time">&nbsp;</span>
	 </div>
	 <script type=text/javascript>
	 function updateDateTime ( )
	 {
	   var currentTime = new Date ( );
	   
	   var currentDay = currentTime.getDay ( );
	   var currentDate = currentTime.getDate ( );
	   var currentMon = currentTime.getMonth ( ) + 1;
	   var currentYr = currentTime.getFullYear ( );
	   var currentHours = currentTime.getHours ( );
	   var currentMinutes = currentTime.getMinutes ( );
	   var currentSeconds = currentTime.getSeconds ( );

	   // Pad the minutes and seconds with leading zeros, if required
	   currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
	   currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
	   currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
	   currentDate = ( currentDate < 10 ? "0" : "" ) + currentDate;
	   currentMon = ( currentMon < 10 ? "0" : "" ) + currentMon;
  
	   // Choose either "AM" or "PM" as appropriate
	   var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

	   // Convert the hours component to 12-hour format if needed
	   currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
	   if ( currentDay == 0 ) {
	       currentDay = "Sun" ;
	   } ;
	   if ( currentDay == 1 ) {
	       currentDay = "Mon" ;
	   } ;
	   if ( currentDay == 2 ) {
	       currentDay = "Tue" ;
	   } ;
	   if ( currentDay == 3 ) {
	       currentDay = "Wed" ;
	   } ;
	   if ( currentDay == 4 ) {
	       currentDay = "Thu" ;
	   } ;
	   if ( currentDay == 5 ) {
	       currentDay = "Fri" ;
	   } ;
	   if ( currentDay == 6 ) {
	       currentDay = "Sat" ;
	   } ;
	   // Convert an hours component of "0" to "12"
	   currentHours = ( currentHours == 0 ) ? 12 : currentHours;

	   // Compose the string for display
	   var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
	   var currentDateString = currentDay + " " + currentMon + "-" + currentDate + "-" + currentYr

	   // Update the time display
	   document.getElementById("time").firstChild.nodeValue = currentTimeString;
	   document.getElementById("date").firstChild.nodeValue = currentDateString;
	 }
	 updateDateTime();
	 setInterval("updateDateTime()", 1000 );
	 </script>
iimitk’s picture

I don't see creating a block to host the current date as an overkill; it's a perfectly legit use of Drupal's blocks, IMHO.

The simpler solution is to create a custom block that contains a simple call to Drupal's built-in formate_date() function. You just need to supply the PHP's time() function as its first argument. You may wrap all the code into a function to avoid name collisions, and of course you need to enable the PHP Filter module from the modules page. Paste the following code in the Body textarea, and use PHP code from the Input formats collapsible group:

function current_date_front() {
  $now = time();
  $output = '';
  $output .= formate_date($now);
  return $output;
}
print current_date_front();

Give the block a name and description, and set it to show only on the front page using <front> as a value in the page specific visibility settings section.

Another approach as some has noted, is to use preprocess functions to add a variable to the page.tpl.php template and just print it where you would want in the template's code.

In both cases, using the Drupal's built-in and versatile format_date() allows you to customize the output of the date to your liking, make sure to consult the documentation and the API for instructions on how to leverage that function.

Actually using a block could be more appropriate if you're using caching on your site and is concerned when the block or page (depends on which approach you use) is cached and thus does not display the correct current date.

The solution to this is to write a custom module that defines a block and set that block cache item to -1, which prevents caching the block even when caching on the website is turned on. Setting a block caching is not provided by the front-end block administration page in Drupal.

mannkoepke’s picture

the problem with using php to display the time is that it doesn't update once the page has loaded. the javascript is going to auto-update itself and display the changing seconds even without the refresh. drupal is good for a great many things but displaying dynamic time isn't one of them.

iimitk’s picture

Did the original poster ask for dynamic date and time display on the second level? Even though, I'm pretty sure there are many elegant ways to do this using Drupal's powerful JavaScript features and jQuery.

Actually, Drupal allows to use its functions in JavaScript out of the box, so using JavaScript with format_date() should be quite easy to implement.

425Media’s picture

To be honest I was just wondering if there was a module that could be added to my drupal sites that could provide a date and time service for my websites.

Thank you all for your suggestions, I will try to implement them and see what happens.

Thanks again.

S

Yuki’s picture

subscribing

whmitty’s picture

The Drupal date module must be installed for this to work. This solution uses functions which can be found in the file named "date_api.module" which is located under /sites/all/modules/date where the date module resides once installed. Look in that same file for info on formatting the date and time. The added advantage here is that it accounts for time zones if the user has selected one or defaults to the site's time zone if not. The downside is that it requires a page refresh to update the time.

I'm relatively new to PHP so I'm going to look into whether or not there's a PHP analog to the JavaScript SetInterval function as used by mannkoepke in his JavaScript offering above. If there is then that could be used with this code to take care of the dynamic updating. Perhaps a commingling of his JavaScript with this code?

Put the following code into a block and put wherever.

//Drupal function (accounts for user selected time zone)
$datetime = date_now(); 

//Drupal function to generate formated date/time output.
echo date_format_date($datetime, $type = 'custom', 'm/d/Y g:i a');
grajah’s picture

copy this into a block

<div style="background:#edf6ff">
<div align="center" height="125" style="background:#9fbcff;color:black;padding:3px 3px 3px 3px;font-size: 120%;" ><b>Thailand, Bangkok</b></div>
<div align="center"><iframe src="http://free.timeanddate.com/clock/i1sew9mt/n28/fn10/tcedf6ff/pcedf6ff/avt/ftb/pa3/tt1/tw1/tm1/td2" frameborder="0" width="146" height="23"></iframe></div>
<div align="center"><iframe src="http://free.timeanddate.com/clock/i1sew9mt/n28/fn10/tcedf6ff/pcedf6ff/avt/ftb/pa3" frameborder="0" width="102" height="23" align="center"></iframe></div>
<div align"left" style="color:black;"><p></p></div>
</div>

use the link http://www.timeanddate.com/clocks/free.html?n=64
to choose your timezone and generate code automatically.

mhalpern’s picture

Just a quick note of caution not to use this code as it exists. "formate_date" is not a function! If you put this code in (as I did) without double checking it, it will break your site! The correct function call is format_date

sean1979’s picture

Hi mhalpern

I accidentally used the code with "formate_date" before reading your note of caution and have lost my site!!!
Do you have any idea how to fix this?

regards
Sean

ndwilliams3’s picture

This is a jQuery clock. Just add the js file and <div id="clock"></div> to your page.tpl.php

http://code.google.com/p/epiclock/

425Media’s picture

... are there any demo's of this clock that I can see?

mreza’s picture

Check this module Clock module for Drupal 6&7

chilledweb’s picture

The team here were looking to do this and did not want to enable PHP to do this (as that opens up all sorts of security issues).
It is very possible to edit the template .. but if you don't want to do that then you can Javascript quite easily like this:

<h2 class="text-align-center"><strong>Welcome&nbsp;-&nbsp;<span id="date-today">&nbsp;</span></strong></h2>
<script>
var m_names = new Array("January", "February", "March", 
"April", "May", "June", "July", "August", "September", 
"October", "November", "December");
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
document.getElementById("date-today").innerHTML = (curr_date + " " + m_names[curr_month] + " " + curr_year);
</script>

You can format the date (and time if you need) using some neat Javascript.
This site will show you how: http://www.webdevelopersnotes.com/javascript-date-and-time
Hope that helps.
The ChilledWeb Team.

VM’s picture

I suggest a custom block module rather than shoving something like this in a template file. If using Drupal 7 one could also investigate using https://www.drupal.org/project/clock