Necesito mostrar la fecha actual en un input
tipo date
en vez de que salga dd/mm/aaaa
.
-
4Qué has intentado?– Lucas D.A.W.Commented el 24 may. 2018 a las 19:18
-
Agrega mas información a tu pregunta como una descripción mas especifica de lo que intentaste y lo que deseas que pase.– bercklyn CarlosvizaCommented el 24 may. 2018 a las 19:46
-
si alguna de las respuesta te ha servido podes marcarla como resuelta, eso te dara al menos 2 puntos de reputacion que te seran utiles en un futuro. saludos.– Francisco IA LoverCommented el 29 jun. a las 17:23
9 respuestas
Podrias intentar algo como lo siguiente:
window.onload = function(){
var fecha = new Date(); //Fecha actual
var mes = fecha.getMonth()+1; //obteniendo mes
var dia = fecha.getDate(); //obteniendo dia
var ano = fecha.getFullYear(); //obteniendo año
if(dia<10)
dia='0'+dia; //agrega cero si el menor de 10
if(mes<10)
mes='0'+mes //agrega cero si el menor de 10
document.getElementById('fechaActual').value=ano+"-"+mes+"-"+dia;
}
<input type="date" id="fechaActual" value="" >
-
esta respuesta tiene problemas de escalabilidad a pesar de que usas un id para poblar el input, lo tienes amarrado la logica... yo preferiria pasarlo por un argumento... Commented el 10 ene. a las 20:26
Para hacerlo deberías usar JavaScript.
Podes utilizar el objeto Date
, te recomiendo que leas un poco acerca de el para darle un uso más específico
n = new Date();
//Año
y = n.getFullYear();
//Mes
m = n.getMonth() + 1;
//Día
d = n.getDate();
//Lo ordenas a gusto.
document.getElementById("date").innerHTML = d + "/" + m + "/" + y;
<h1 id="date"></h1>
-
1El OP pide cargar el valor en in
input[type=date]
no en un div. El formato presentado en esta respuesta no será compatible– YussefCommented el 10 ene. a las 14:56
Por que no utilizas la libreria momentjs es mas sencillo manipular las fecha e incluso si también pretendes manejarla en localizaciones.
moment.locale(); // en
moment().format('LT'); // 2:44 PM
moment().format('LTS'); // 2:44:36 PM
moment().format('L'); // 02/03/2022
moment().format('l'); // 2/3/2022
moment().format('LL'); // February 3, 2022
moment().format('ll'); // Feb 3, 2022
moment().format('LLL'); // February 3, 2022 2:44 PM
moment().format('lll'); // Feb 3, 2022 2:44 PM
moment().format('LLLL'); // Thursday, February 3, 2022 2:44 PM
moment().format('llll'); // Thu, Feb 3, 2022 2:44 PM
-
1Esta respuesta es incorrecta, ninguno de los formatos presentados es valido para el value un
input[type=date]
. Promueve el uso de una librería que desde el 2020 sus mismos autores desaconsejan.– YussefCommented el 10 ene. a las 14:48
Este es un ejemplo super sencillo con el objeto Date espero pueda servirte
var fecha = new Date();
document.getElementById("FechaActual").value = fecha.toJSON().slice(0,10);
<input type="date" class="form-control form-control-sm" id="FechaActual">
El elemento input
cuando es del tipo date
tiene una propiedad llamada valueAsDate
, con el cual pues asignar o retornar el valor del input
pero usando un objeto del tipo Date
MyInput.valueAsDate = new Date();
<input id="MyInput" type="date" />
const fecha = new Date(respuesta["fecha_nac"]);
const [day, month, year] = respuesta["fecha_nac"].split("/");
console.log(year + "-" + month + "-" + day);
document.getElementById("editarFechaNac").value =
year + "-" + month + "-" + day;
-
Pulsa en editar y explica brevemente el funcionamiento del código. Recuerda que Stack Overflow en español no es un repositorio de código. Lee Cómo responder y haz el recorrido de bienvenida para conocer el funcionamiento del sitio. Commented el 20 jul. 2022 a las 11:02
-
La constate
fecha
sobra en este código. Además esto solo funciona sirespuesta["fecha_nac"]
está en formatodd/MM/yyyy
y por supuesto tampoco usa la fecha actual que es lo que el OP quería– YussefCommented el 10 ene. a las 14:58
Puedes utilizar la biblioteca date-fns para conseguir mas fácil eso.
Código JavaScript:
import { format } from 'date-fns';
let fechaActual = new Date();
let fechaFormateada = format(fechaActual, 'yyyy-MM-dd');
Input html:
<input type="date" :value="fechaFormateada">
-
2Como va a ser más fácil bajar una librería solo para rellenar un input?!– YussefCommented el 10 ene. a las 14:53
-
Si trabajas en un proyecto en el cual tienes que utilizar mas veces es tipo de formateo de fechas es mucho mas fácil utilizar esta librería que formatear tu a mano la fecha no crees? @Yussef– StefanCommented el 10 ene. a las 15:05
-
2No lo creo, crear un función para formatear la fecha (por ejemplo como la que está en la respuesta más votada de esta pregunta) y aplicar dicha función es mucho más simple que tener que descargar una librería y tener que leer la documentación para saber usarla. Te recomiendo una publicación davidhaney.io/npm-left-pad-have-we-forgotten-how-to-program– YussefCommented el 10 ene. a las 15:21
var fechaActual = new Date().toISOString().split('T')[0];
document.getElementById('fechaActual').value= fechaActual
<input id ="fechaActual" type="date">
-
1Pulsa en editar y describe cómo este código responde a la pregunta. Lee Cómo responder. Commented el 10 ene. a las 11:20
Hay muchas formas de responder a tu pregunta... y cuesta hacerlo por que muchos creeran que no has intentado nada.
Pero seguire la premisa de que el bien es para la comunidad en general.
A dia de hoy la manera en que yo lo haria serian las siguientes:
// Obtener la fecha actual en formato YYYY-MM-DD
const today = new Date().toISOString().split('T')[0];
// Asignar la fecha actual al input tipo date
document.getElementById('fecha').value = today;
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mostrar Fecha Actual</title>
</head>
<body>
<label for="fecha">Selecciona una fecha:</label>
<input type="date" id="fecha">
</body>
</html>
en este caso con las dos linea de codigo nos encargamos del obtener la fecha y convertirlo al formato YYYY-MM-DD para el input date.
Ahora hiremos por un poco de escalabilidad:
si esto pretendes usarlo en diferentes lugares lo ideal seria utilizar un wrap que se encargue de ejecutar toda la logica y eso lo logramos mediante un metodo/funcion:
// Función para obtener y establecer la fecha actual en un input tipo date
function establecerFechaActualEnInput(inputId) {
const input = document.getElementById(inputId);
if (input) {
input.value = new Date().toISOString().split('T')[0];
} else {
console.error(`No se encontró el elemento con el ID ${inputId}`);
}
}
// Llamar a la función para establecer la fecha actual en el input con ID 'fecha'
establecerFechaActualEnInput('fecha');
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mostrar Fecha Actual</title>
</head>
<body>
<label for="fecha">Selecciona una fecha:</label>
<input type="date" id="fecha">
</body>
</html>
como veras estoy implementando un ID para identificar en que lugar quiero ese valor.