CRM y plataformas de datos

Cómo rellenar previamente un campo de formulario con la fecha de hoy y JavaScript o JQuery

Si bien muchas soluciones ofrecen la oportunidad de almacenar la fecha con cada entrada del formulario, hay otras ocasiones en las que no es una opción. Alentamos a nuestros clientes a agregar un campo oculto a su sitio y pasar esta información junto con la entrada para que puedan realizar un seguimiento cuando se ingresan las entradas del formulario. Usando JavaScript, esto es fácil.

Cómo rellenar previamente un campo de formulario con la fecha de hoy y JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Date Prepopulation with JavaScript</title>
</head>
<body>
    <form>
        <!-- Hidden field for the date -->
        <input type="hidden" id="hiddenDateField" name="hiddenDateField">
    </form>

    <script>
        // Function to get today's date in the desired format
        function getFormattedDate() {
            const today = new Date();
            const formattedDate = today.toLocaleDateString('en-US', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            });
            return formattedDate;
        }

        // Use JavaScript to set the value of the hidden field to today's date
        document.getElementById('hiddenDateField').value = getFormattedDate();
    </script>
</body>
</html>

Analicemos el código HTML y JavaScript proporcionado paso a paso:

  1. <!DOCTYPE html> y <html>: Estas son declaraciones de documentos HTML estándar que especifican que se trata de un documento HTML5.
  2. <head>: esta sección se utiliza normalmente para incluir metadatos sobre el documento, como el título de la página web, que se establece mediante el <title> .
  3. <title>: Esto establece el título de la página web en "Relleno previo de fecha con JavaScript".
  4. <body>: Esta es el área de contenido principal de la página web donde se colocan el contenido visible y los elementos de la interfaz de usuario.
  5. <form>: un elemento de formulario que puede contener campos de entrada. En este caso, se utiliza para contener el campo de entrada oculto que se completará con la fecha de hoy.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Este es un campo de entrada oculto. No aparece en la página pero puede almacenar datos. Se le asigna un ID de "hiddenDateField" y un nombre de "hiddenDateField" para su identificación y uso en JavaScript.
  7. <script>: Esta es la etiqueta de apertura de un bloque de script JavaScript, donde puedes escribir código JavaScript.
  8. function getFormattedDate() { ... }: Esto define una función de JavaScript llamada getFormattedDate(). Dentro de esta función:
    • Crea una nueva Date objeto que representa la fecha y hora actuales usando const today = new Date();.
    • Formatea la fecha en una cadena con el formato deseado (dd/mm/aaaa) usando today.toLocaleDateString(). 'en-US' El argumento especifica la configuración regional (inglés americano) para el formato y el objeto con year, monthy day properties define el formato de fecha.
  9. return formattedDate;: Esta línea devuelve la fecha formateada como una cadena.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Esta línea de código:
    • Usos document.getElementById('hiddenDateField') para seleccionar el campo de entrada oculto con el ID "hiddenDateField".
    • Establece el value propiedad del campo de entrada seleccionado al valor devuelto por el getFormattedDate() función. Esto llena el campo oculto con la fecha de hoy en el formato especificado.

El resultado final es que cuando se carga la página, el campo de entrada oculto con ID "hiddenDateField" se completa con la fecha de hoy en el formato mm/dd/yyyy sin ceros a la izquierda, como se especifica en el getFormattedDate() función.

Cómo rellenar previamente un campo de formulario con la fecha de hoy y jQuery

<!DOCTYPE html>
<html>
<head>
    <title>Date Prepopulation with jQuery and JavaScript Date Object</title>
    <!-- Include jQuery from a CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form>
        <!-- Hidden field for the date -->
        <input type="hidden" id="hiddenDateField" name="hiddenDateField">
    </form>

    <script>
        // Use jQuery to set the value of the hidden field to today's date
        $(document).ready(function() {
            const today = new Date();
            const formattedDate = today.toLocaleDateString('en-US', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            });
            $('#hiddenDateField').val(formattedDate);
        });
    </script>
</body>
</html>

Este código HTML y JavaScript demuestra cómo utilizar jQuery para rellenar previamente un campo de entrada oculto con la fecha de hoy, con el formato dd/mm/aaaa, sin ceros a la izquierda. Analicémoslo paso a paso:

  1. <!DOCTYPE html> y <html>: Estas son declaraciones de documentos HTML estándar que indican que se trata de un documento HTML5.
  2. <head>: Esta sección se utiliza para incluir metadatos y recursos para la página web.
  3. <title>: establece el título de la página web en "Relleno previo de fecha con jQuery y objeto de fecha JavaScript".
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Esta línea incluye la biblioteca jQuery especificando su fuente desde una red de entrega de contenido (CDN). Garantiza que la biblioteca jQuery esté disponible para su uso en la página web.
  5. <body>: Esta es el área de contenido principal de la página web donde se colocan el contenido visible y los elementos de la interfaz de usuario.
  6. <form>: un elemento de formulario HTML utilizado para contener campos de entrada. En este caso, se utiliza para encapsular el campo de entrada oculto.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: un campo de entrada oculto que no será visible en la página web. Se le asigna un ID de "hiddenDateField" y un nombre de "hiddenDateField".
  8. <script>: Esta es la etiqueta de apertura de un bloque de script JavaScript donde puedes escribir código JavaScript.
  9. $(document).ready(function() { ... });: Este es un bloque de código jQuery. Utiliza el $(document).ready() función para garantizar que el código contenido se ejecute después de que la página se haya cargado por completo. Dentro de esta función:
    • const today = new Date(); crea un nuevo Date objeto que representa la fecha y hora actuales.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); formatea la fecha en una cadena con el formato deseado (dd/mm/aaaa) usando el toLocaleDateString método.
  10. $('#hiddenDateField').val(formattedDate); selecciona el campo de entrada oculto con el ID "hiddenDateField" usando jQuery y establece su value a la fecha formateada. Esto efectivamente rellena previamente el campo oculto con la fecha de hoy en el formato especificado.

El código jQuery simplifica el proceso de selección y modificación del campo de entrada oculto en comparación con JavaScript puro. Cuando se carga la página, el campo de entrada oculto se completa con la fecha de hoy en formato mm/dd/aaaa y no hay ceros a la izquierda, como se especifica en el formattedDate variable.

Douglas Karr

Douglas Karr es CMO de AbrirINSIGHTS y el fundador de la Martech Zone. Douglas ha ayudado a docenas de nuevas empresas exitosas de MarTech, ha colaborado en la diligencia debida de más de $5 mil millones en adquisiciones e inversiones de Martech y continúa ayudando a las empresas a implementar y automatizar sus estrategias de ventas y marketing. Douglas es un orador y experto en transformación digital y MarTech reconocido internacionalmente. Douglas también es autor de una guía para principiantes y de un libro sobre liderazgo empresarial.

Artículos Relacionados

Volver al botón superior
Cerrar

Adblock detectado

Martech Zone puede proporcionarle este contenido sin costo porque monetizamos nuestro sitio a través de ingresos publicitarios, enlaces de afiliados y patrocinios. Le agradeceríamos que elimine su bloqueador de anuncios mientras visita nuestro sitio.