I am working with Vue 3 and using moment js, I am with this function:
//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;
};
and what I want to achieve is to load this date in an input type="datetime-local "
to reuse code. I have some components and in this case I have the following, which I import in a main component.
<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>
In my main component I call it but I can't get the date to load with the corresponding format
<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>
Can someone help me with this problem, it's quite strange and absurd in my opinion...
If you look at the documentation
<input type="datetime-local">
you will see that it says that its value must be in a specific format that you are not using in your string.The solution is to change this line:
for this other one:
to get the expected format for that field, which would be this:
Actually, I found myself trying another format on the firefox page that gave me the solution, a rather silly problem but very specific at the same time.
YYYY-MM-DDThh:mm
leaving my solution like this