Como criar e trabalhar com elementos HTML de data e hora exemplos em PHP e JS

Para criar e trabalhar com elementos HTML de data e hora, siga os passos abaixo:

Passo 1: Use a tag <time> para definir a data e hora Para definir uma data e hora em HTML, use a tag <time> e especifique o valor no atributo “datetime”, no formato ISO 8601 (AAAA-MM-DDTHH:MM:SS). O texto que será exibido para o usuário pode ser adicionado entre as tags <time> e </time>.

Por exemplo, para exibir a data e hora atual:

<p>A data e hora atual é <time datetime="<?php echo date('c'); ?>"><?php echo date('d/m/Y H:i:s'); ?></time>.</p>

Passo 2: Personalize a exibição da data e hora com CSS Você pode personalizar a exibição da data e hora com CSS, usando os seletores de atributos para estilizar a tag <time> com base no valor do atributo “datetime”. Por exemplo:

/* Estilo para datas no formato ISO 8601 */
time[datetime^="20"] {
  font-weight: bold;
}

/* Estilo para datas no formato DD/MM/AAAA */
time[datetime$="/2022"] {
  color: red;
}

No exemplo acima, o primeiro seletor estiliza todas as datas que começam com “20” (para representar os anos de 2020 a 2099) em negrito, enquanto o segundo seletor estiliza todas as datas que terminam com “/2022” em vermelho.

Passo 3: Use funções de data e hora em PHP ou JavaScript Você pode usar funções de data e hora em PHP ou JavaScript para gerar valores de data e hora dinamicamente. Por exemplo, em PHP, você pode usar a função date() para formatar a data e hora atual:

<p>A data e hora atual é <time datetime="<?php echo date('c'); ?>"><?php echo date('d/m/Y H:i:s'); ?></time>.</p>

Em JavaScript, você pode usar a classe Date para obter a data e hora atual:

<p>A data e hora atual é <time datetime="" id="current-time"></time>.</p>

<script>
  var now = new Date();
  var dateTimeString = now.toISOString();
  var formattedDateTimeString = now.toLocaleString();
  var timeElement = document.getElementById("current-time");
  timeElement.textContent = formattedDateTimeString;
  timeElement.setAttribute("datetime", dateTimeString);
</script>

No exemplo acima, a data e hora atual são obtidas usando a classe Date, e o valor é exibido no elemento <time> com o ID “current-time”. O atributo “datetime” é definido como o valor da data e hora em formato ISO 8601.