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:
<!DOCTYPE html>
y<html>
: Estas son declaraciones de documentos HTML estándar que especifican que se trata de un documento HTML5.<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>
.<title>
: Esto establece el título de la página web en "Relleno previo de fecha con JavaScript".<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.<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.<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.<script>
: Esta es la etiqueta de apertura de un bloque de script JavaScript, donde puedes escribir código JavaScript.function getFormattedDate() { ... }
: Esto define una función de JavaScript llamadagetFormattedDate()
. Dentro de esta función:- Crea una nueva
Date
objeto que representa la fecha y hora actuales usandoconst 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 conyear
,month
yday
properties define el formato de fecha.
- Crea una nueva
return formattedDate;
: Esta línea devuelve la fecha formateada como una cadena.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 elgetFormattedDate()
función. Esto llena el campo oculto con la fecha de hoy en el formato especificado.
- Usos
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:
<!DOCTYPE html>
y<html>
: Estas son declaraciones de documentos HTML estándar que indican que se trata de un documento HTML5.<head>
: Esta sección se utiliza para incluir metadatos y recursos para la página web.<title>
: establece el título de la página web en "Relleno previo de fecha con jQuery y objeto de fecha JavaScript".<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.<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.<form>
: un elemento de formulario HTML utilizado para contener campos de entrada. En este caso, se utiliza para encapsular el campo de entrada oculto.<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".<script>
: Esta es la etiqueta de apertura de un bloque de script JavaScript donde puedes escribir código JavaScript.$(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 nuevoDate
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 eltoLocaleDateString
método.
$('#hiddenDateField').val(formattedDate);
selecciona el campo de entrada oculto con el ID "hiddenDateField" usando jQuery y establece suvalue
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.