How to change date format for input date?

Question

JavaScript

There is a date input field:

<input class="datapicker" v-model="docData.FacturaDoc.FacturaDate" :placeholder="$t('documents.headers.DATE')" type="text" onfocus="(this.type='date')" onblur="(this.type='text')">

The user selects or manually writes the date using the mask dd.mm.yyyy For example, 03/05/2020. But when he clicks on any place on the site, the date format he entered in the field immediately changes to yyy-mm-dd 2020-03-05 and this format will get into v-model and on the server. It turns out that input produces a standard date format for the server? How to change it?
The main thing is that the field has a placeholder when the field is empty. This helps onfocus="(this.type='date')" onblur="(this.type='text')" But when the date is selected and for example the user clicked on an empty space. The date format changes.

Answer 1

<input type="date" />No switching back and forth.

Answer 2

You don't need a mask on the date. The field value is always in international format regardless of locale settings. And to get the date
<input type="date" />

HTMLInputElement.value // 2020-03-06
new Date(HTMLInputElement.value) // Date Fri Mar 06 2020 02:00:00 GMT+0200

And when you get this date, you can transform it however you want. But it is best to store it just in the international format or in a timestamp.
JS, for example, will easily understand it, unlike yours:

new Date(1583366400000) // Date Thu Mar 05 2020 02:00:00 GMT+0200
new Date("2020-03-05")  // Date Thu Mar 05 2020 02:00:00 GMT+0200
new Date("05.03.2020")  // Invalid Date

Answer 3

Or maybe you should stop doing nonsense and take a ready-made component that can do what you need?