JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<head>
  <!-- CSS de Bootstrap 4 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <!-- CSS de FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
  <div class="container">
    <div class="form-group">
      <label for="campoFechaHora">Fecha y Hora:</label>
      <div class="input-group">
        <input type="text" id="campoFechaHora" class="form-control" disabled placeholder="Clique no relógio para começar">
        <div class="input-group-append">
          <span class="input-group-text reloj-icono">
            <i class="fas fa-clock"></i>
          </span>
        </div>
      </div>
    </div>
  </div>

  <!-- JavaScript de Bootstrap 4 -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

JavaScript

document.addEventListener("DOMContentLoaded", function() {
      var input = document.getElementById("campoFechaHora");

      function actualizarFechaHora() {
        var fechaHora = new Date();
        var dia = ("0" + fechaHora.getDate()).slice(-2);
        var mes = ("0" + (fechaHora.getMonth() + 1)).slice(-2);
        var anio = fechaHora.getFullYear();
        var horas = ("0" + fechaHora.getHours()).slice(-2);
        var minutos = ("0" + fechaHora.getMinutes()).slice(-2);
        var fechaHoraFormateada = dia + "/" + mes + "/" + anio + " " + horas + ":" + minutos;
        input.value = fechaHoraFormateada;
      }

      var relojIcono = document.querySelector(".reloj-icono");
      relojIcono.addEventListener("click", function() {
        actualizarFechaHora();
        input.placeholder = "";
      });
    });