Vue 2 Get Current Date, Time and Timestamp Tutorial

Vue Date and Time tutorial; Date and Time are the primary values, which help identify and validate the occurrences of the event.

Every system has a particular date and Time based on the time zone etc., when we talk about the date and Time, so we have to comprehend the archetype of it particularly.

Understanding the nuances of things always gives me long-term gratification. Similarly, I would like to proliferate my learning with you so that you can align this knowledge with your brain to amplify your development skills.

A software application pattern mainly consists of client-side and server-side. In simple terms, a client-side is your current system connected to the browser, whereas the server-side is primarily referred to the backend where your REST API lies.

The client communicates with the server to exchange the information; that information can be authenticated with date and Time, it helps track or keep records intact.

In this eloquent guide, we will show you some practical methods to answer how to get the current date and Time in Vue js; this vue js date and time example will give your conscience immense gratification, especially if you are a novice in vue development.

Set Up Vue App

Here are the instructions that help you set up the vue development environment on your machine.

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

Node.js Gatsby error – “digital envelope routines::unsupported …”

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

To remove above error for invoking the app, make sure to update the "scripts": [] array in 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"
},

Get Current Date and Time in Vue Example

In your Vue application, you can handle date and time very easily; through the help of the given code snippet, we are trying to:

1:) => Get current time in vue

2:) => Get current year in vue

3:) => Get current date in vue

4:) => Get timestamp in vue

5:) => Get full date and time with the time zone in vue

First, you have to create a new component file in the components folder, then add the provided code in 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>

Start Vue Application

The following command can be used to run the vue js application; make sure to execute the command from the terminal to view the app on the browser.

npm run serve

After successfully starting the application, you will see the following output, and we are sure it will give you an immense feeling of gratification.

Conclusion

Through, this guide you must have understood how to get the current date in MM/DD//YYYY format, how to get the only current time, and how to get an only current year.

We hope we have been less peculiar in persuading the concept; getting the current date and time in vue js is extremely easy and less time-consuming.