How to get full current date and time in Vue.js without writing massive JavaScript lines

Question

I want to print "Last updated: 6/12/2019 1:30 PM" in Vue.js. I have the current year but I want the full date and time. Here's what I have so far

<div id="app">
Last updated: {{ new Date().getFullYear() }}
</div>

You can make your life alot easier and just use momentJS https://momentjs.com/ — Adam Buchanan Smith, Jun 12 '19 at 18:42
Possible duplicate of [How to format a JavaScript date](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) — str, Jun 12 '19 at 18:43

score 11 · Accepted Answer · answered Jun 13 '19 at 06:41

11

You can use: new Date().toLocaleString(), it gives you "6/13/2019, 9:40:40 AM"

answered Jun 13 '19 at 06:41

Ziv Ben-Or

Hamouda Arfaoui · Answer 2 · 2019-06-12T20:12:23.347

1

you can either use JavaScript new Date() methods check MDN , or you can install vue-moment via npm .

Installation :

npm install moment

Require the plugin :

var moment = require('moment');

Display Date :

<span>Last updated: {{ moment("D/M/YYYY h:mm A") }}</span>

edited Jun 12 '19 at 20:12

answered Jun 12 '19 at 19:05

Hamouda Arfaoui

This is what I was trying before but it does not work. Although I installed moment it says there is a problem with the plugin : Vue.use(require('vue-moment')); – hulkenbergg Jun 12 '19 at 19:41
@ibeefymcwhatnow can you list your error ? vue-moment should work properly first. – Hamouda Arfaoui Jun 12 '19 at 19:45
Uncaught ReferenceError: Vue is not defined – hulkenbergg Jun 12 '19 at 19:54
I am certain that I installed moment – hulkenbergg Jun 12 '19 at 19:54
@ibeefymcwhatnow i've updated my Solution try the new Edit. – Hamouda Arfaoui Jun 12 '19 at 20:13
Thank you for answering but now I get a different error saying: Error in render: "TypeError: _vm.moment is not a function" – hulkenbergg Jun 13 '19 at 17:11

score 1 · Answer 3 · answered Dec 05 '20 at 07:02

It is a very simple getting current date time in vue.js.

You can use: {{ new Date() }}, it gives you Sat Dec 05 2020 12:51:25

Date() will provide us full date and time with timezone.

But you want to make better format like 'dd-mm-yyyy' in vue.js, then you use moment

import moment from 'moment'

Vue.prototype.moment = moment

Then in your template, simply use

{{ moment(new Date()).format('DD-MM-YYYY') }}

Output:

05-12-2020

3 Answers3