How to get Current date,time timestamp in Vuejs with example


Date and time values are specific to machine that is running.

First, client side linked to current machine browser, Another is server side where backend machine is running.

In my previous post, You learned current timestamp in [javascript] (/javascript-current-epoc-timestamp) and ReactJS.

if you already aware of getting an current date in JavaScript, It is very simple in Vuejs Application.

Javascript provides Date object, holds date,time and timezone information, It provides various methods to provide the current date information.

Vuejs always runs on client browsers, Getting date and time in vue is client side only.

This post talks about getting current date and timestamp in vuejs.

Current date timestamp year in vuejs example

You will learn following things in vuejs

  • Get Current Date in DD/MM/YYYY format
  • get Current time only
  • Current UNIX epoc timestamp in UTC
  • Retrieve current Year only

get Current Date,Year,time/timestamp in vuejs

In Vuejs Application, Below are steps to get date information

  • Create Vue component for this example
  • Initialize the following global variables in data function and return this as object
  data: () => ({
    timestamp: "",
    date: "",
    time: "",
    currentYear: "",
  }),
  • Created a functions in methods section.
  getDate: function () {
    return new Date().toLocaleDateString();
  },
  ```
-  Call the methods on vue component load using mounted callback function and update the variables in data object.

- new Date().toLocaleDateString() return the Date in **MM/DD/YYY** format
- **toLocaleTimeString()** returns the time in **HH:MM:SS AM** format
-  **getFullYear()** in Date object returns year value only
- now() method in date object returns current Unix timestamp since epoch time

Complete example code

```javascript
<template>
<div>
  <div v-show="timestamp">Timestamp:{{ timestamp }}</div>
  <div v-show="date">Date:{{ date }}</div>

  <div v-show="time">Time:{{ time }}</div>

  <div v-show="currentYear">Only year:{{ currentYear }}</div>
</div>
</template>
<script>
export default {
name: "CurrentDate",
data: () => ({
  timestamp: "",
  date: "",
  time: "",
  currentYear: "",
}),

props: {
  msg: String,
},
methods: {
  getDate: function () {
    return new Date().toLocaleDateString();
  },
  getTime: function () {
    return new Date().toLocaleTimeString();
  },
  getTimestamp: function () {
    return Date.now();
  },
  getCurrentYear: function () {
    return new Date().getFullYear();
  },
},
mounted: function () {
  this.date = this.getDate();
  this.time = this.getTime();
  this.timestamp = this.getTimestamp();
  this.currentYear = this.getCurrentYear();
},
};
</script>

<style>
</style>
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.