How to change dateformat in vue 3?-CodePudding

I got the problem like this 2022-12-06T17:00:00.000Z

This is my code:

<Calendar
                inputId="range"
                v-model="collectionItems.StartOn"
                selectionMode="range"
                :manualInput="false"
                dateFormat="yy-mm-dd"
              >
              </Calendar>

But I want like this 2022-12-05

CodePudding user response：

To change the date format in Vuejs v3, you can use the date-fns.

npm install date-fns

and you can format date like bellow

var formatedDate = format(date, 'yyyy-MM-dd');

If you want to working code, I made it available on my codepen: https://codepen.io/maymeow/pen/xxzmgKJ

Hope it helps.

CodePudding user response：

You have to format your collectionItems.StartOn before applying it to your custom component Calendar

Doest it come from your backend?

Either you parse it on your backend before sending it to your frontend, or you parse it via a JS date library like date-fns, dayjs or moment;

Install via yarn or npm and just follow the documentation ;)