CRM e plataformas de datos

Como preencher un campo de formulario coa data de hoxe e JavaScript ou JQuery

Aínda que moitas solucións ofrecen a oportunidade de almacenar a data con cada entrada do formulario, hai outras veces nas que non é unha opción. Animamos aos nosos clientes a engadir un campo oculto ao seu sitio e pasar esta información xunto coa entrada para que poidan seguir cando se introducen as entradas do formulario. Usando JavaScript, isto é sinxelo.

Como encher previamente un campo de formulario coa data de hoxe e 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>

Imos desglosar o código HTML e JavaScript proporcionado paso a paso:

  1. <!DOCTYPE html> <html>: Son declaracións estándar de documentos HTML que especifican que se trata dun documento HTML5.
  2. <head>: Esta sección úsase normalmente para incluír metadatos sobre o documento, como o título da páxina web, que se define mediante o <title> elemento.
  3. <title>: Establécese o título da páxina web como "Data de prepoboación con JavaScript".
  4. <body>: Esta é a área de contido principal da páxina web onde coloca o contido visible e os elementos da interface de usuario.
  5. <form>: un elemento de formulario que pode conter campos de entrada. Neste caso, úsase para conter o campo de entrada oculto que se encherá coa data de hoxe.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Este é un campo de entrada oculto. Non aparece na páxina pero pode almacenar datos. Dáselle un ID de "hiddenDateField" e un nome de "hiddenDateField" para a súa identificación e uso en JavaScript.
  7. <script>: Esta é a etiqueta de apertura para un bloque de script JavaScript, onde podes escribir código JavaScript.
  8. function getFormattedDate() { ... }: Isto define unha función JavaScript chamada getFormattedDate(). Dentro desta función:
    • Crea un novo Date obxecto que representa a data e hora actual usando const today = new Date();.
    • Formata a data nunha cadea co formato desexado (mm/dd/aaaa) usando today.toLocaleDateString(). O 'en-US' argumento especifica a configuración rexional (inglés americano) para o formato e o obxecto con year, monthe day propiedades define o formato de data.
  9. return formattedDate;: Esta liña devolve a data con formato como unha cadea.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Esta liña de código:
    • Usa document.getElementById('hiddenDateField') para seleccionar o campo de entrada oculto co ID "hiddenDateField".
    • Establece o value propiedade do campo de entrada seleccionado ao valor devolto polo getFormattedDate() función. Isto enche o campo oculto coa data de hoxe no formato especificado.

O resultado final é que cando se carga a páxina, o campo de entrada oculto co ID "hiddenDateField" enchégase coa data de hoxe no formato mm/dd/aaaa sen ceros ao principio, como se especifica no getFormattedDate() función.

Como preencher un campo de formulario coa data de hoxe e 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 e JavaScript mostra como usar jQuery para preenchear un campo de entrada oculto coa data de hoxe, con formato mm/dd/aaaa, sen ceros ao principio. Desglosámolo paso a paso:

  1. <!DOCTYPE html> <html>: Son declaracións estándar de documentos HTML que indican que se trata dun documento HTML5.
  2. <head>: Esta sección úsase para incluír metadatos e recursos para a páxina web.
  3. <title>: Configura o título da páxina web como "Prepoboación de datas con jQuery e JavaScript Data Object".
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Esta liña inclúe a biblioteca jQuery especificando a súa orixe desde unha rede de entrega de contido (CDN). Asegura que a biblioteca jQuery estea dispoñible para o seu uso na páxina web.
  5. <body>: Esta é a área de contido principal da páxina web onde coloca o contido visible e os elementos da interface de usuario.
  6. <form>: un elemento de formulario HTML usado para conter campos de entrada. Neste caso, úsase para encapsular o campo de entrada oculto.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: un campo de entrada oculto que non estará visible na páxina web. Asignaselle un ID de "hiddenDateField" e un nome de "hiddenDateField".
  8. <script>: Esta é a etiqueta de apertura para un bloque de script JavaScript onde podes escribir código JavaScript.
  9. $(document).ready(function() { ... });: Este é un bloque de código jQuery. Usa o $(document).ready() función para garantir que o código contido se executa despois de que a páxina se cargue por completo. Dentro desta función:
    • const today = new Date(); crea unha nova Date obxecto que representa a data e hora actual.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); formatea a data nunha cadea co formato desexado (dd/mm/aaaa) usando o toLocaleDateString método.
  10. $('#hiddenDateField').val(formattedDate); selecciona o campo de entrada oculto co ID "hiddenDateField" usando jQuery e establece o seu value á data formatada. Isto encherá previamente o campo oculto coa data de hoxe no formato especificado.

O código jQuery simplifica o proceso de selección e modificación do campo de entrada oculto en comparación co JavaScript puro. Cando se carga a páxina, o campo de entrada oculto enchégase coa data de hoxe no formato mm/dd/aaaa e non hai ceros ao principio, como se especifica no formattedDate variable.

Douglas Karr

Douglas Karr é CMO de OpenINSIGHTS e o fundador da Martech Zone. Douglas axudou a decenas de startups exitosas de MarTech, axudou na debida dilixencia de máis de 5 millóns de dólares en adquisicións e investimentos en Martech e segue axudando ás empresas a implementar e automatizar as súas estratexias de vendas e mercadotecnia. Douglas é un experto e relator de MarTech en transformación dixital recoñecido internacionalmente. Douglas tamén é autor publicado dunha guía de Dummie e dun libro de liderado empresarial.

artigos relacionados

Botón de volta ao principio
preto

Adblock detectado

Martech Zone pode fornecerche este contido sen ningún custo porque monetizamos o noso sitio mediante ingresos publicitarios, ligazóns de afiliados e patrocinios. Agradeceríamos que elimines o teu bloqueador de anuncios mentres visitas o noso sitio.