Como Obtener la Fecha y Hora en Vue JS 3

4 minuto(s)

En esta página:

Demo Github

El uso de fechas, horas, minutos, segundos, etc., en el desarrollo web es muy frecuente y en Vue no es la excepción. Desde una base de datos que almacena la fecha y hora de creación de un registro hasta el año actual en el pie de página de una web, las fechas y horas son datos importantes que siempre estan y estarán presentes en los proyectos de desarrollo web, software, ciencia de datos y otrás áreas más. En este Post te enseñaré a Como Obtener la Fecha y Hora en Vue JS 3, vamos con ello.

Página Web — Vue te permite desarrollar interfaces de aplicaciones web

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Con Que Lenguaje De Programación Comenzar Para El Desarrollo Web” y “¿ Porqué Es Importante Saber Programar en la Ciberseguridad ?” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Como Obtener la Fecha y Hora en Vue JS 3.

Como Obtener la Fecha y Hora en Vue JS 3

Cuando creamos un nuevo proyecto con Vue, por defecto este nos crea un archivo llamad App.vue, abrimos este archivo y comenzamos creando el contenido de la vista, agrego una variable {{ datos }}:


<template>
  <div>
    <strong>Fecha y Hora Actual: </strong>
    <br>
    {{ datos }}
  </div>
</template>

<div>

<strong>Fecha y Hora Actual: </strong>

<br>

</div>

</template>

Dentro de { datos }} cargaremos la fecha y hora desde el código que se encuentra en las etiquetas <script></script>:


<script>

  export default {
      
    data() {
      return {
        datos: this.mostrarFechayhora()
      }
    },
    methods:{
        mostrarFechayhora: function () {

          const date = new Date();          
          const formatear = ("0" + date.getDate()).slice(-2) + "-" + ("0"+(date.getMonth()+1)).slice(-2) + "-" +
                            date.getFullYear() + " " + ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2) + ":"
                            + ("0" + date.getSeconds()).slice(-2);   
          // Mostramos la fecha y hora en la consola                                   
          console.log(formatear); 
          
          return formatear; 
     
        }
    },
    mounted () {
      this.mostrarFechayhora()
    }

  }

</script>

export default {

data() {

return {

datos: this.mostrarFechayhora()

}

methods:{

mostrarFechayhora: function () {

const date = new Date();

const formatear = ("0" + date.getDate()).slice(-2) + "-" + ("0"+(date.getMonth()+1)).slice(-2) + "-" +

date.getFullYear() + " " + ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2) + ":"

+ ("0" + date.getSeconds()).slice(-2);

// Mostramos la fecha y hora en la consola

console.log(formatear);

return formatear;

}

mounted () {

this.mostrarFechayhora()

}

</script>

En el código anterior he creado una función llamada mostrarFechayHora() y dentro de ella hago uso del objeto Date() para crear una nueva fecha y hora, luego selecciono por partes cada elemento de la fecha, es decir selecciono el día, mes, las horas y los segundos. Para ello hago uso de los métodos getDate(), getMonth(), getFullYear(), getHours(), getMinutes() y getSeconds() de JavaScript. También hago uso del método slice() de JavaScript para formatear los valores.

Entonces si vamos al navegador, podemos ver la fecha y hora formateada:

Fecha y Hora Actual — Hemos formateado la fecha y hora al formato local

Al inicio de este post, he colocado una demo para que veas el proyecto en acción, asimismo he colocado un enlace al código fuente del proyecto alojado en GitHub para que lo puedas descargar y usar en tus proyectos.

Conclusión

En este post has aprendido a Como Obtener la Fecha y Hora en Vue JS 3, hasta la fecha de este tutorial, la última versión de Vue es la 3, en el futuro apareceran nuevas versiones y subversiones. Pero como hacemos uso de JavaScript, el código compartido en este tutorial, podrá servir para muchas próximas versiones de Vue.