Есть ли более простой способ отображения времени и даты в HTML с помощью bootstrap?

Question

ЭТО ДВА ЧАСТИ ВОПРОСА:

1. Можно ли отображать время и дату в реальном времени в HTML с помощью bootstrap? Я безуспешно искал youtube и страницу get boostrap о том, как это сделать?

Я скопировал приведенный ниже пример кода и фотографию, где я хочу его разместить.

Использую ли я кнопку или контейнер для встраивания, где я хочу разместить его на картинке из слова?

Я использую бесплатный шаблон администратора из get bootstrap. com

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

Answer 1

Как сказал @ Charl ie Ли, добавление прямых часов на ваш сайт не имеет ничего общего с Bootstrap, вы должны использовать JavaScript. И вы не первый, кто хочет такую ​​функцию! Я нашел этот вопрос здесь, в Переполнении стека , с несколькими решениями, одним из которых является следующее:

Добавьте следующий скрипт на свой веб-сайт, желательно внизу страницы:

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

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

    setInterval(clock, 1000);
</script>

Это будет обновлять дату и время каждую секунду и отображать их в элементе с идентификатором clock. Чтобы изменить формат даты и времени, взгляните на эту страницу , в частности, на раздел Экземпляры даты .

После этого добавьте следующий элемент, где вы хотите, чтобы появились часы, или добавьте идентификатор clock к существующему элементу:

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

Различные форматы даты и времени для разных размеров окна

Эта часть был добавлен по запросу автора вопроса.

Чтобы использовать разные форматы даты и времени для разных размеров окон, замените приведенный выше код сценария следующим:

<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>

Это просто и быстрое решение, которое могло бы быть улучшено. Он проверяет размер окна каждую секунду перед печатью даты и времени, чтобы использовать правильный формат, даже если пользователь изменяет размер окна без перезагрузки страницы.

Answer 2

1. Bootstrap - это, прежде всего, структура CSS, что означает, что он предназначен для стилизации элементов HTML, а не для вычисления значений, таких как текущая дата и время. Добавление этого не имеет ничего общего с использованием Bootstrap. Вам нужно написать код JavaScript, чтобы добавить время к элементу HTML.

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

Вам необходимо добавить элемент <div> HTML между строками <h1 class="h2">Dashboard</h1> и <div class="btn-toolbar mb2.... Затем он должен иметь атрибут id (например, <div id="time-container"></div>, чтобы вы могли установить время с помощью кода JavaScript.

Answer 3

Вам понадобится код JavaScript, чтобы получить текущую дату, преобразовать ее в строку, а затем обновить элемент HTML, содержащий отображаемую дату.

Этот код получит Date объект, установите текущие дату и время:

let nowDate = new Date();

Объект Date имеет множество методов, которые выводят строку. Вот только один формат, который форматирует дату, указав c в локаль ('en-US' == US Engli sh):

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

Множество дополнительных параметров форматирования на справочной странице Date .

Вам также необходимо периодически обновлять sh отображение даты. Для этого есть встроенная функция, которая называется setInterval :

window.setInterval(myDateFunction, 1000);

Это будет вызывать myDateFunction() каждую секунду (1000 миллисекунд).

И наконец, чтобы обновить содержимое элемента div даты на своей странице, проверьте document.getElementById () :

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

Соберите все вместе:

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>