Ketan Patel    03-Feb-2015

In many Content Management Systems(CMS) or admin panels of websites we see the current date and time display in header portion. In this tutorial we'll see how to add current date and time in opencart admin panel.

Note: Tested in Opencart 2.0.0.0 , 2.0.1.0, 2.0.1.1

 

As we're going to add the time display in header portion, we have to modify the header file. Open file /opencart/upload/admin/controller/common/header.php and find the below line in the index() function.

$data['text_logout'] = $this->language->get('text_logout');

and add the below code just after that.

// Months variables
$data['text_january']    = $this->language->get('text_january');
$data['text_february']   = $this->language->get('text_february');
$data['text_march']      = $this->language->get('text_march');
$data['text_april']      = $this->language->get('text_april');
$data['text_may']        = $this->language->get('text_may');
$data['text_june']       = $this->language->get('text_june');
$data['text_july']       = $this->language->get('text_july');
$data['text_august']     = $this->language->get('text_august');
$data['text_september']  = $this->language->get('text_september');
$data['text_october']    = $this->language->get('text_october');
$data['text_november']   = $this->language->get('text_november');
$data['text_december']   = $this->language->get('text_december');
$data['text_year']       = $this->language->get('text_year');

 

Now we need to set the language variables. We need to add these variables in all the languages files the site is running. I have added variables in only default english language, if you have other language then you have to add them in other language file also. Open /opencart/upload/admin/language/english/common/header.php and add the below code:

// Months
$_['text_january']                     = 'January';
$_['text_february']                    = 'February';
$_['text_march']                       = 'March';
$_['text_april']                       = 'April';
$_['text_may']                         = 'May';
$_['text_june']                        = 'June';
$_['text_july']                        = 'July';
$_['text_august']                      = 'August';
$_['text_september']                   = 'September';
$_['text_october']                     = 'October';
$_['text_november']                    = 'November';
$_['text_december']                    = 'December';
$_['text_year']                        = '';

 

Now we need to add the custom javascript code for the time display in the template file of the header. Open file: /opencart/upload/admin/view/template/common/header.tpl and find the below code:

<?php foreach ($scripts as $script) { ?>
    <script type="text/javascript" src="<?php echo $script; ?>"></script>
<?php } ?>

add the below code after that,

<script type="text/javascript">
    function display() {
     var d       = new Date();
     var month   = d.getMonth();
     var day     = d.getDate();
     var hours   = d.getHours();
     var minutes = d.getMinutes();
     var seconds = d.getSeconds();

     if (month == 0) month = "<?php echo $text_january; ?>";
      else if (month == 1) month  = "<?php echo $text_february; ?>";
      else if (month == 2) month  = "<?php echo $text_march; ?>";
      else if (month == 3) month  = "<?php echo $text_april; ?>";
      else if (month == 4) month  = "<?php echo $text_may; ?>";
      else if (month == 5) month  = "<?php echo $text_june; ?>";
      else if (month == 6) month  = "<?php echo $text_july; ?>";
      else if (month == 7) month  = "<?php echo $text_august; ?>";
      else if (month == 8) month  = "<?php echo $text_september; ?>";
      else if (month == 9) month  = "<?php echo $text_october; ?>";
      else if (month == 10) month = "<?php echo $text_november; ?>";
      else if (month == 11) month = "<?php echo $text_december; ?>";;

     if (day <= 9) day = "0" + day;
     if (hours <= 9) hours = "0" + hours;
     if (minutes <= 9) minutes = "0" + minutes;
     if (seconds <= 9) seconds = "0" + seconds;

     date_time =+ day + " " + month + " " + d.getFullYear() +
     "<?php echo $text_year; ?><br />"+ hours + ":" + minutes + ":" + seconds;
     if (document.layers) {
      document.layers.div_display.document.write(date_time);
      document.layers.div_display.document.close();
     }
     else document.getElementById("div_display").innerHTML = date_time;
      setTimeout("display()", 1000);
     }
</script>

 

next find the below line:

<a href="<?php echo $home; ?>" class="navbar-brand"><img src="view/image/logo.png" alt="<?php echo $heading_title; ?>" title="<?php echo $heading_title; ?>" /></a>

and add the below code after that,

<div id="div_display" class="time_display">
   <script language="JavaScript" type="text/javascript">
   display();
   </script>
</div>

 

Add Some CSS

In order to add some css , open /opencart/upload/admin/view/stylesheet/stylesheet.css file and add the  below class:

/*Current Date/Time CSS*/
.time_display {
 float:left;
 position:relative;
 top:5px;
 left:20px;
 color:#1e91cf;
 font-size:12px;
 font-weight: bold;
}

That's it. Go to admin section and refresh the page to clear cache. You will see the current date time in header section.

About Ketan Patel

A Web Developer having 7+ years of experience in web development. Worked with Laravel-Lumen, CakePHP, CodeIgniter, Opencart to make sites for startup companies and small businesses. Apart from blogging, he likes to read Novels, Listening music and Net surfing.