How to Add the Current Date & Time in Hostinger Website Builder

If you want to display the current date and time on your website using Hostinger Website Builder, this step-by-step guide will show you how. By following these simple instructions, you can add a dynamic time and date display that updates automatically.

Step 1: Log in to Hostinger Website Builder

1. Log in to your Hostinger account.
2. Navigate to the Websites section.
3. Click on the Edit Website button next to the site you want to modify.

Step 2: Add an HTML Code Element

1. Go to the section where you want to add the current date and time. In this example, we’ll place it in the footer.
2. Click on Add Element from the menu.
3. Scroll down and select Embed Code.
4. Drag and drop the code element into your desired location.

Step 3: Insert the Date & Time Code

1. Click on the Enter Code option.
2. Delete the default placeholder code.
3. Copy and paste the following JavaScript code to display the date and time:

<div class="datetime-container">
    <h2 class="datetime-title">Current Date & Time</h2>
    <div id="date" class="datetime-date"></div>
    <div id="time" class="datetime-time"></div>
</div>

<script>
function updateDateTime() {
    var now = new Date();
    
    var dateOptions = { 
        weekday: 'long', 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric'
    };
    var timeOptions = { 
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit'
    };

    document.getElementById("date").innerHTML = now.toLocaleDateString("en-US", dateOptions);
    document.getElementById("time").innerHTML = now.toLocaleTimeString("en-US", timeOptions);
}

// Update time every second
setInterval(updateDateTime, 1000);
updateDateTime();
</script>

<style>
.datetime-container {
    text-align: center;
    background: #edce1f;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}

.datetime-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.datetime-date {
    font-size: 20px;
    color: #0073e6;
    margin-bottom: 5px;
}

.

4. Click Apply and update your website.

Step 4: Customize the Date & Time Display

Change Text Color

To modify the text color, update the CSS in the embed code section:

#datetime {
  color: black; /* Change this to any color code */
}

Change Background Color

Modify the background color by adding the following style:

#datetime {
  background-color: lightgray; /* Replace with your desired color */
}

Change Date & Time Format

If you want the date and time to appear in a specific language, modify the toLocaleString() function. For example, for French:

now.toLocaleString('fr-FR');

Step 5: Save & Publish Your Changes

Once you’ve customized the display to your preference, update your website and refresh the page to see the current date and time in action.

Conclusion

Adding a real-time date and time display to your Hostinger website is a simple process using an embedded code element. You can further customize the format, colors, and styles to match your website’s design. If you have any questions or need further customization tips, leave a comment below!