Vue 2 Tutorial- Get Current Date, Time And Timestamp Example

Vue 2 Tutorial- Get Current Date And Time; Date and Time are the primary values since these help us identify and validate the occurrence of the event.

 

As far as a software application pattern is concerned, the client-side is our system connected to the browser. The client communicates with the server to exchange information. We know that this information can be authenticated with date and time which helps us track or keep the records intact.

 

So, in this Vue 2 tutorial, we will be knowing some practical methods to answer how to get the current date and time in a Vue js app. Even if you are a novice in developing the Vue apps, then also this easy step-by-step guide would help in an immense easy way.

 

Let’s see the steps to be followed for its implementation:

 

Step 1- Set Up Vue App

Step 2- Get The Current Date And Time In Vue Example

Step 3- Start Vue Application

 

Step 1- Set Up Vue App

Vue CLI makes the Vue app development very smooth. We simply have to run the following command in order to set up the Vue development environment on our device:

npm install -g @vue/cli
vue create vue-blog
cd vue-blog

 


Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

 

In order to remove the above-given error, we have to make sure to update the “scripts”: [] array in the package.json file:

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

 

Step 2- Get the Current Date And Time In Vue Example

It’s quite easy and simple to handle the date and time in our Vue app. The below code would help us to:

  • Get the current time in Vue
  • Get the current year in Vue
  • Get the current date in Vue
  • Get the current timestamp in Vue
  • Get the full date and time with the time zone in Vue

First of all, we require to create a new component file in the components folder after which we have to add the following code to the file to print the date and time and show it on the browser:

<template>
    <div>
        <h2 class="text-center mb-3">Vue Get Full Date and Time Example</h2>
        <ul class="list-group">
          <li class="list-group-item" v-show="timestamp"><strong>Timestamp:</strong> {{ timestamp }}</li>
          <li class="list-group-item" v-show="date"><strong>Date:</strong> {{ date }}</li>
          <li class="list-group-item" v-show="time"><strong>Time:</strong> {{ time }}</li>
          <li class="list-group-item" v-show="year"><strong>Current Year:</strong> {{ year }}</li>
          <li class="list-group-item" v-show="fulldatetime"><strong>Full Date:</strong> {{ fulldatetime }}</li>
        </ul>
    </div>  
</template>
<script>
    export default {
        name: "DateComponent",
        data: () => ({
          date: '',
          time: '',
          year: '',
          timestamp: '',
          fulldatetime: ''
        }),
        methods: {
          printDate: function () {
            return new Date().toLocaleDateString();
          },
          printTime: function () {
            return new Date().toLocaleTimeString();
          },
          printYear: function () {
            return new Date().getFullYear();
          },          
          printTimestamp: function () {
            return Date.now();
          },
          printFullDate: function(){
            return new Date();
          }
        },
        mounted: function () {
          this.date = this.printDate();
          this.time = this.printTime();
          this.timestamp = this.printTimestamp();
          this.year = this.printYear();
          this.fulldatetime = this.printFullDate();
        },
    };
</script>

 

Step 3- Start Vue Application

Since we have reached the end of this tutorial, we need to run the Vue app by executing the below command from the terminal to view the app on the browser:

npm run serve

 

Conclusion

So friends, in this Vue js example, we have seen how to get the current date in MM/DD//YYYY format and how to get the current time. We have also seen how to get the current year.

Hope that you will surely take benefit of this Vue tutorial in order to integrate this current date and time feature in your future Vue apps.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *