Feb 3, 2015

Ketan Patel

Opencart : Add Current Date and Time in Admin


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. So open the below file.


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. One thing to note is we need to add these variables in all the languages files the site is running. Here i've added variables in only default english language, if you have other language then you have to add them in other language file also.


Open File : /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.


File : /opencart/upload/admin/view/template/common/header.tpl

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 stylesheet.css file and add the  below class.

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


Ketan Patel

About Ketan Patel -

I have developed a wide range of websites using CorePHP, Opencart, CakePHP and CodeIgniter including sites for startup companies and small businesses. Apart from my blogging life, I like to read Novels, Listening music and Net surfing.

Subscribe to this Blog via Email :