2

Necesito mostrar la fecha actual en un input tipo date en vez de que salga dd/mm/aaaa.

3
  • 4
    Qué has intentado? 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. Commented 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. Commented el 29 jun. a las 17:23

9 respuestas 9

11

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="" >

1
  • 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
6

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>

1
  • 1
    El OP pide cargar el valor en in input[type=date] no en un div. El formato presentado en esta respuesta no será compatible
    – Yussef
    Commented el 10 ene. a las 14:56
2

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
1
  • 1
    Esta 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.
    – Yussef
    Commented el 10 ene. a las 14:48
2

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">

1
1

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" />

1
0
    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;
2
  • 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.
    – padaleiana
    Commented el 20 jul. 2022 a las 11:02
  • La constate fecha sobra en este código. Además esto solo funciona si respuesta["fecha_nac"] está en formato dd/MM/yyyy y por supuesto tampoco usa la fecha actual que es lo que el OP quería
    – Yussef
    Commented el 10 ene. a las 14:58
-1

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">
3
  • 2
    Como va a ser más fácil bajar una librería solo para rellenar un input?!
    – Yussef
    Commented 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
    – Stefan
    Commented el 10 ene. a las 15:05
  • 2
    No 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
    – Yussef
    Commented el 10 ene. a las 15:21
-1

var fechaActual = new Date().toISOString().split('T')[0];
document.getElementById('fechaActual').value= fechaActual
<input id ="fechaActual" type="date">

1
-1

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.