Add User's Time and Date In Place of Logo on Sidebar
Posted: 27 Mar 2024, 15:55
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:
Javascript:
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;
}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>