Format vue-datepicker time in yyyy-mm-dd - vue.js

Question

I am using vue3-datepicker library.
<datepicker
v-model="to_date"
inputFormat="yyyy-MM-dd"
/>
My data method is below:
data(){
to_date: new Date(),
}
When I am selecting a date and printing {{this.to_date}}, it is printing in Fri Sep 17 2021 09:39:49 GMT+0530 (India Standard Time).
I want it in yyyy-MM-dd format.
How can I achieve this?

Answer 1

A quick solution is to use Date.prototype.toISOString(), which formats the date as:
yyyy-MM-ddTHH:mm:ss.sssZ
So you get the desired date format by splitting the result by T, and taking the first array element:
const formatDate = date => {
const tzOffset = date.getTimezoneOffset() * 60 * 1000
return new Date(date - tzOffset).toISOString().split('T')[0]
}
Then use the method in your template:
<span>{{ formatDate(to_date) }}</span>
demo

Answer 2

You can achieve using moment npm package
install:-
npm i moment
example:-
moment(new Date()).format("yyyy-MM-dd")
you can use Use different format
var dt = new Date();
console.log(moment(dt).format("YYYY-MM-DD HH:mm:ss"));
console.log("Date: "+moment(dt).format("YYYY-MM-DD"));
console.log("Year: "+moment(dt).format("YYYY"));
console.log("Month: "+moment(dt).format("MM"));
console.log("Month: "+moment(dt).format("MMMM"));