Is there an easier way to display live time and date in HTML using bootstrap?

Question

THIS IS A TWO PART QUESTION:

1. Is there away to display live time and date in HTML using bootstrap? I have searched youtube and the get boostrap page with no success on how to do this?

I have copied a sample code below and a picture of where i Want to put it.

2. Do i use a button or a container to embed it, where i want to put it base on the picture from word?

I am using the free admin template from getbootstrap.com

https://getbootstrap.com/docs/4.4/examples/dashboard/

Answer 1

As @Charlie Lee said, adding a live clock to your website has nothing to do with Bootstrap, you must use JavaScript. And you are not the first to want such a feature! I found this question here on Stack Overflow, with multiple solutions, one of which is this:

Add the following script to your website, preferably at the bottom of the page:

<script type="text/javascript">
    var clockElement = document.getElementById('clock');

    function clock() {
        clockElement.textContent = new Date().toString();
    }

    setInterval(clock, 1000);
</script>

This will update the date and time every second, and display it in the element with the id clock. To change the format of the date and time, take a look at this page, specifically the Date instances section.

After this, add the following element where you want the clock to appear, or add the clock id to an existing element:

<span id="clock"></span>

Different date and time formats for different window sizes

This part was added on request of the author of the question.

To use different date and time formats for different window sizes, replace the script code above with this:

<script type="text/javascript">
    var clockElement = document.getElementById('clock');

    function clock() {
        var date = new Date();

        // Replace '400px' below with where you want the format to change.
        if (window.matchMedia('(max-width: 400px)').matches) {
            // Use this format for windows with a width up to the value above.
            clockElement.textContent = date.toLocaleString();
        } else {
            // While this format will be used for larger windows.
            clockElement.textContent = date.toString();
        }
    }

    setInterval(clock, 1000);
</script>

This is a simple and quick solution, that could probably be improved. It checks the window size every second before printing the date and time, to use the correct format even if the user resizes the window without reloading the page.

Answer 2

1. Bootstrap is primarily a CSS framework, which means it is for styling HTML elements rather than computing values such as current date and time. Adding this is nothing to do with using Bootstrap. You need to write some JavaScript code to add the time to a HTML element.

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript

2. You need to add a <div> HTML element between the lines <h1 class="h2">Dashboard</h1> and <div class="btn-toolbar mb2.... This should then have a id attribute (eg <div id="time-container"></div> so you can set the time using JavaScript code.

Answer 3

You'll need some JavaScript code to obtain the current date, convert it to a string, then update the HTML element enclosing your displayed date.

This code will obtain a Date object, set to the current date and time:

let nowDate = new Date();

The Date object has lots of methods that output a string. Here's just one that formats the date specific to a locale ('en-US' == US English):

let dateStr = nowDate.toLocalString('en-US');
// sample output: "12/19/2012, 7:00:00 PM"

Lots more formatting options at the Date reference page.

You'll also need to refresh the date display periodically. There's a built-in function to help you do that, called setInterval:

window.setInterval(myDateFunction, 1000);

This will call myDateFunction() every second (1000 milliseconds).

And finally, to update the contents of date div on your page, check out document.getElementById():

let dateDiv = document.getElementById('date-div-id');
dateDiv.innerHTML = dateStr;

Putting it all together:

const dateDiv = document.getElementById('date-div');

function myDateFunction() {
  const now = new Date();
  const nowStr = now.toLocaleString('en-US');
  dateDiv.innerHTML = nowStr;
}
setInterval(myDateFunction, 1000);

<div id="date-div"></div>