Vue Get Full Current Date, Time, and Timestamp Example

Vue Get Full Current Date Time

Throughout this quick tutorial, you will ascertain how to get the full current DateDate and timestamp in the Vue js app using the new Date() object.

Ideally, there are two type of DateDate and time in the application’s client-side and server-side; in this quick tutorial, we will show you how to get the current full DateDate and time using the browser’s time zone.

The vindication of full DateDate seems like a long string, a simple whole text string; we will try to understand the Date Date () object to display dates.

This vue date and time example help you explain the usage of the new Date() constructor to get:

  • current time
  • current year
  • current date
  • full timestamp
  • full current date and time

Getting Started

This step is only needed when you haven’t set up a new vue app; jump on to the subsequent step if you have already set up the new app.

vue create vue-booking

And, here is the command to initialize the vue app on the browser.

npm run serve

Vue Js Current Date Example

You can get the current date in DD/MM/YYYY format, create new Date object access the toLocaleDateString() method.

The toLocaleDateString() method changes the date of a Date object into a plain and readable string, using locale conventions.

We are display the date in the vue template using the {{ currentDate }} prop.

<template>
    <div>
        <h2>Get Current Date in Vue</h2>
        
        <p v-show="currentDate">
            <strong>Current Date:</strong> {{ currentDate }}
        </p>
    </div>  
</template>

<script>
    export default {
        name: "DateTime",
        data: () => ({
          currentDate: ''
        }),
        methods: {
          showDate: function () {
            return new Date().toLocaleDateString();
          }
        },
        mounted: function () {
          this.currentDate = this.showDate();
        },
    };
</script>

Vue Get Time Example

The new Date() object also gives vindication of time, use the toLocaleTimeString() method to display the time in vue js template.

The toLocaleTimeString() method is useful and lets you access and get the time from the Date object in the human readable string.

<template>
    <div>
        <h2>Get Time in Vue</h2>
        
        <p v-show="time">
            <strong>Time:</strong> {{ time }}
        </p>
    </div>  
</template>

<script>
    export default {
        name: "DateTime",
        data: () => ({
          time: ''
        }),
        methods: {
          showTime: function () {
            return new Date().toLocaleTimeString();
          }
        },
        mounted: function () {
          this.time = this.showTime();
        },
    };
</script>

Vue Get Timestamp Example

Next, you can use the Date.now() method to get the full timestamp in string form, use the following code to see the time stamp in the browser.

<template>
    <div>
        <h2>Get Timestamp in Vue</h2>
        
        <p v-show="timeStamp">
            <strong>Timestamp:</strong> {{ timeStamp }}
        </p>
    </div>  
</template>

<script>
    export default {
        name: "DateTime",
        data: () => ({
          timeStamp: ''
        }),
        methods: {
          showTimestamp: function () {
            return Date.now();
          }
        },
        mounted: function () {
          this.timeStamp = this.showTimestamp();
        },
    };
</script>

Get Current Year in Vue

Next, you will learn to get the current year from the date object in vue, the date object offers tons of eloquent properties to handle date and time.

Further we will teach you to display current year in vue.

<template>
    <div>
        <h2>Get Current Year in Vue</h2>
        
        <p v-show="currentYear">
            <strong>Current Year:</strong> {{ currentYear }}
        </p>
    </div>  
</template>

<script>
    export default {
        name: "DateTime",
        data: () => ({
          currentYear: ''
        }),
        methods: {
          showYear: function () {
              return new Date().getFullYear();
          }
        },
        mounted: function () {
          this.currentYear = this.showYear();
        },
    };
</script>

Get Full Current Date in Vue

Eventually, you will understand how to get the complete string to display current full date in vue.

<template>
    <div>
        <h2>Vue Get Current Full Date</h2>
        
        <p v-show="getFullDate">
            <strong>Full Date:</strong> {{ getFullDate }}
        </p>
    </div>  
</template>

<script>
    export default {
        name: "DateTime",
        data: () => ({
          getFullDate: ''
        }),
        methods: {
          showFullDate: function () {
              return new Date();
          }
        },
        mounted: function () {
          this.getFullDate = this.showFullDate();
        },
    };
</script>

We believe you will like these tips and understood the basic concept of working with dates and time in vue.