Как изменить формат даты для input date?

Question

[TheSerKat]

Есть поле ввода даты:

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

Юзер выбирает или пишет вручную дату по маске дд.мм.гггг Например 05.03.2020 . Но когда он нажмет на любое место на сайте, формат даты которую он ввел в поле сразу же изменяется на гггг-мм-дд 2020-03-05 и такой формат попадет в v-model и на сервер. Получается что-ли input выдает стандартный формат даты для сервера? Как его изменить?
Главное чтобы в поле был placeholder когда поле не заполнено. В этом помогает onfocus="(this.type='date')" onblur="(this.type='text')" Но когда дата выбрана и например юзер щелкнул по пустому месту. Формат даты меняется.

Answer 1

[Александр]

<input type="date" /> Без переключения туда-сюда.

Answer 2

[Alex]

Вам не нужна маска на дате. Значение поля всегда в международном формате не зависимо от настроек локали.

<input type="date" />
А для получения даты

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

И получая эту дату вы можете её преобразовать как хотите. Но лучше всего её хранить как раз в международном формате или в timestamp.

JS например легко его поймёт, в отличии от вашего:

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

Comments

[TheSerKat]

Тоесть я правильно понял. Что я не могу изменить формат даты отпровляемую на сервер? Значит и input также будет принимать такой формат.

[Alex]

TheSerKat, Нет. вы не правильно поняли. Я написал, что вам НЕ нужно изменять тип чекбокса. Вам НЕ нужно делать какую-либо маску. Браузер ВСЕГДА отдаёт значение даты в определённом формате, который, если вам хочется, можно изменить перед отправкой на сервер. А ещё я написал что идея хранить на сервере даты в формате "05.03.2020" — ужасна и вызовет у вас кучу проблем.