Opencart 4.x : How To Add Current Date And Time In Admin

📅 Published: February 11, 2023 | 📝 Last updated: 5 months ago

Learn how to display the current date and time in OpenCart 4.x admin panel step by step. Beginner-friendly guide with code, examples and troubleshooting tips.

Opencart 4.x : How To Add Current Date And Time In Admin

In many admin panels or dashboards, we can see the current date and time at the top. This is very helpful for store managers or developers because they can easily check whether the server time is correct or not while working in the admin area.

In this tutorial, we will learn step by step how to show the current date and time in the OpenCart admin panel. We will also see why it can be useful, how to customize the format, and how to fix common issues if something goes wrong.

Tested on OpenCart version: 4.1.0.3

Why Show Date and Time in Admin Panel?

Adding a live date and time to the OpenCart admin panel can help in many situations:

Order Management: While processing orders, you can quickly confirm the current time on the server.
Report Checking: If you are checking sales reports or generating invoices, the date and time confirm when the data was last viewed.
Multiple Time Zones: If your server is in a different country, you can compare the browser time with the server time to avoid confusion.
Quick Validation: When debugging scheduled tasks (cron jobs), seeing the live time helps confirm script execution timings.

Now, let’s see how to add this feature in OpenCart admin step by step.

Step 1: Modify the Admin Controller

We will start by editing the header.php controller file, because we want to send the date and time-related variables to the template.

Open this file in your project:

/admin/controller/common/header.php

In the index() function, find this line:

$this->load->language('common/header');

Just after this line, add the following code:


// Months variables for displaying in JavaScript
$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');

We are sending month names to the template so we can show them dynamically in the selected admin language.

Step 2: Add Language Variables

We now need to define these month variables in the language file. If your OpenCart is multi-language, add them in each language file.

Open:

/admin/language/en-gb/common/header.php

Add these lines:


// Month Names
$_['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']       = '';

If you have multiple languages (like French, Arabic, or Hindi), you need to add the translated month names in their respective files too.

Step 3: Add JavaScript in the Header Template

Next, we will add the JavaScript function to show live date and time. Open this file:

/admin/view/template/common/header.twig

Find this section:

{% for script in scripts %}
    <script type="text/javascript" src="{{ script.href }}"></script>
{% endfor %}

And add this script right after it:

<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();

        // Month mapping with language strings
        var months = [
            '{{ text_january }}',
            '{{ text_february }}',
            '{{ text_march }}',
            '{{ text_april }}',
            '{{ text_may }}',
            '{{ text_june }}',
            '{{ text_july }}',
            '{{ text_august }}',
            '{{ text_september }}',
            '{{ text_october }}',
            '{{ text_november }}',
            '{{ text_december }}'
        ];
        month = months[month];

        // Add leading zeros
        if (day < 10) day = "0" + day;
        if (hours < 10) hours = "0" + hours;
        if (minutes < 10) minutes = "0" + minutes;
        if (seconds < 10) seconds = "0" + seconds;

        // Final string
        var date_time = day + " " + month + " " + d.getFullYear() + " {{ text_year }} <br />" + hours + ":" + minutes + ":" + seconds;

        // Update div
        document.getElementById("div_display").innerHTML = date_time;

        // Refresh every second
        setTimeout(display, 1000);
    }
</script>

Step 4: Add the Display Area

Now, we need to add the HTML element that will show the date and time.

Find this line in the same header.twig file:

<a href="{{ home }}" class="navbar-brand d-none d-lg-block">
    <img src="view/image/logo.png" alt="{{ heading_title }}" title="{{ heading_title }}" />
</a>

Just after this, add:

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

Step 6: Refresh and Test

Login to your OpenCart admin.
Refresh the page to clear the cache (or use Ctrl + F5).
You should now see the current date and time in the top header.

Common Problems and Fixes

Time not updating: Make sure the display() function is called inside the div_display container.
Wrong time showing: The code uses browser time. If you want server time, you need to pass PHP date() output to JavaScript.
Language not applied: Check that you have added month variables in the correct language file.
Changes not visible: Clear admin cache and browser cache to see updates.