Add User's Time and Date In Place of Logo on Sidebar

[spartan0311mp]

Attached is my sidebar.php file that removes the logo from showing, and instead prints the user's local time and date using javascript, which also includes the seconds. Doesn't work too well on mobile, but we primarily use this on a computer.

CSS to put in the custom.css file:

Code: Select all

.dtg {
  margin-top: 15px;
  margin-bottom: 15px;
  color: #33b5e5;
  font-size: 2.0vw;
  font-weight: 700;
  text-align: center;
}

Javascript:

Code: Select all

<!-- BEGIN SIDEBAR TOGGLER BUTTON -->
                    <div class="dtg">
                        <?php
                            // Get current time in the desired format
                            $current_time = date('H:i:s'); // HH:MM:SS
                            echo "$current_time<br>";
                            // Get current date in the desired format
                            $current_date = date('m/d/Y'); // DD/MM/YYYY
                            echo "$current_date";
                        ?>
                    </div>
                    <script>
                        // Function to update time and date every second
                        function updateTimeAndDate() {
                            // Get current time in the desired format
                            var currentTime = new Date().toLocaleTimeString('en-US', { hour12: false });
                            // Get current date in the desired format
                            var currentDate = new Date().toLocaleDateString('en-US');
                            // Update the HTML content
                            document.querySelector('.dtg').innerHTML = currentTime + "<br>" + currentDate;
                        }
                        // Call updateTimeAndDate function initially
                        updateTimeAndDate();
                        // Call updateTimeAndDate function every second
                        setInterval(updateTimeAndDate, 1000);
                    </script>