0

Estoy trabajando con Vue 3 y utilizando moment js, estoy con esta funcion:

 //Funcion para obtener el tiempo actual, tiempo al crear o editar un registro
    const horaActual = ()=> {
       const hoy = moment().format('D-MM-Y H:mm');
       return hoy;
   };

y lo que deseo lograr es cargar esta fecha en un input del type="datetime-local " para reutilizar codigo tengo unos componentes y en este caso tengo el siguiente, el cual importo en un componente principal.

<template>
    <div class="rounded bg-gray-200">
        <label class="" :for="name">
            {{ label }}
        </label>
        <input :value="model" type="datetime-local" :id="name" class="bg-white rounded w-full text-black focus:outline-none border-b-2 border-white focus:border-teal-400 transition duration-500 h-7" />
        <div v-if="$store.state.form_errors[name]" class="text-red-500">
            {{ $store.state.form_errors[name] }}
        </div>
    </div>
</template>

<script>
    export default {
        name: "InputDateTime",
        props: ["name", "model", "label"],
    }
</script>

En mi componente principal lo llamo pero no logro que me cargue la fecha con el formato que corresponde

<div class="col-span-6 sm:col-span-3 lg:col-span-3">
    <label for="fecha" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Fecha recepción</label>
    <input-date-time name="fecha" :model="horaActual()" @input="$emit('update:fecha', $event.target.value)" autocomplete="family-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border border-gray-300 rounded-md" />
    <p>{{horaActual()}}</p>
</div>

![image|690x111](upload://oBjtp4JzBldZqCpvgYyFPiNxvOs.png)

Alguien me puede dar una ayuda a este problema, es bastante raro y absurdo a mi parecer...

2 respuestas 2

1

Si miras la documentación del <input type="datetime-local"> verás que dice que su value debe estar en un formato concreto que no estás usando en tu string.

La solución pasa por cambiar esta línea:

const hoy = moment().format('D-MM-Y H:mm');

por esta otra:

const hoy = moment().format('YYYY-MM-DDThh:mm');

para obtener el formato que se espera para ese campo, que sería este:

2022-05-23T20:50
2
  • Por ahi iba la cosa amigo, intente con otro formato que he poosteado en mi respuesta... gracias por el link amigo! el 24 may. 2022 a las 13:32
  • Vale, he modificado mi respuesta con tu dato para no confundir a quien la lea, ya que la has aceptado. En realidad tenia mis dudas sobre ese formato, y no investigue el formato de moment pues me creia lo que habias puesto en la pregunta, donde habia esto: <p>{{horaActual()}}</p> y en la captura salia completa aunque no en el orden correcto: 23-05-2022 20:50, y deduje sin verificarlo que esas letras del formato estaban bien y tan solo debia cambiar su orden.
    – masterguru
    el 24 may. 2022 a las 13:37
0

En realidad era encontre probando en la pagina de firefox otro formato que me dio la solucion, un problema bastante tonto pero bien especifico a la vez.

YYYY-MM-DDThh:mm

quedando asi mi solucion

//Funcion para obtener el tiempo actual, tiempo al crear o editar un registro
const horaActual = ()=> {
    //const hoy = moment().format('D-MM-Y H:mm');
    const hoy = moment().format('YYYY-MM-DDThh:mm');
    return hoy;
};

Tu Respuesta

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

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